diff --git a/lib/simpleshop_theme_web/components/shop_components.ex b/lib/simpleshop_theme_web/components/shop_components.ex index 41529cf..d2f477e 100644 --- a/lib/simpleshop_theme_web/components/shop_components.ex +++ b/lib/simpleshop_theme_web/components/shop_components.ex @@ -861,77 +861,186 @@ defmodule SimpleshopThemeWeb.ShopComponents do end @doc """ - Renders a centered hero section with title, description, and optional CTA. + Renders a centered hero section with title, description, and optional CTAs. ## Attributes * `title` - Required. The main heading text. * `description` - Required. The description paragraph text. + * `variant` - The visual variant: + - `:default` - Standard hero with section wrapper and padding + - `:page` - Page header style, larger title, more spacing, no section wrapper + - `:error` - Error page with pre-title (404), two buttons * `background` - Background style. Either `:base` (default) or `:sunken`. - * `cta_text` - Optional. Text for the CTA button. + * `pre_title` - Optional. Text shown above title (e.g., "404" for error pages). + * `cta_text` - Optional. Text for the primary CTA button. * `cta_page` - Optional. Page to navigate to on click (for preview mode). + * `cta_href` - Optional. URL for live mode navigation. + * `secondary_cta_text` - Optional. Text for secondary button (error variant). + * `secondary_cta_page` - Optional. Page for secondary button (preview mode). + * `secondary_cta_href` - Optional. URL for secondary button (live mode). * `mode` - Either `:live` (default) or `:preview`. ## Examples <.hero_section title="Original designs, printed on demand" - description="From art prints to apparel – unique products created by independent artists." + description="From art prints to apparel..." cta_text="Shop the collection" cta_page="collection" mode={:preview} /> <.hero_section - title="About the studio" - description="Nature photography, printed with care" - background={:sunken} + variant={:page} + title="Contact Us" + description="Questions about your order?" + /> + + <.hero_section + variant={:error} + pre_title="404" + title="Page Not Found" + description="Sorry, we couldn't find the page..." + cta_text="Go to Homepage" + secondary_cta_text="Browse Products" + mode={:preview} /> """ attr :title, :string, required: true attr :description, :string, required: true + attr :variant, :atom, default: :default attr :background, :atom, default: :base + attr :pre_title, :string, default: nil attr :cta_text, :string, default: nil attr :cta_page, :string, default: nil attr :cta_href, :string, default: nil + attr :secondary_cta_text, :string, default: nil + attr :secondary_cta_page, :string, default: nil + attr :secondary_cta_href, :string, default: nil attr :mode, :atom, default: :live def hero_section(assigns) do ~H""" -
-

- <%= @title %> -

-

- <%= @description %> -

- <%= if @cta_text do %> - <%= if @mode == :preview do %> - - <% else %> - + +

+ <%= @description %> +

+ <.hero_cta + :if={@cta_text} + text={@cta_text} + page={@cta_page} + href={@cta_href} + mode={@mode} + variant={:primary} + /> +
+ + <% :page -> %> +
+

- <%= @cta_text %> - - <% end %> - <% end %> - + <%= @title %> +

+

+ <%= @description %> +

+
+ + <% :error -> %> +
+ <%= if @pre_title do %> +

+ <%= @pre_title %> +

+ <% end %> +

+ <%= @title %> +

+

+ <%= @description %> +

+ <%= if @cta_text || @secondary_cta_text do %> +
+ <.hero_cta + :if={@cta_text} + text={@cta_text} + page={@cta_page} + href={@cta_href} + mode={@mode} + variant={:primary} + /> + <.hero_cta + :if={@secondary_cta_text} + text={@secondary_cta_text} + page={@secondary_cta_page} + href={@secondary_cta_href} + mode={@mode} + variant={:secondary} + /> +
+ <% end %> +
+ <% end %> """ end + + attr :text, :string, required: true + attr :page, :string, default: nil + attr :href, :string, default: nil + attr :mode, :atom, required: true + attr :variant, :atom, required: true + + defp hero_cta(assigns) do + ~H""" + <%= if @mode == :preview do %> + + <% else %> + " text-decoration: none;"} + > + <%= @text %> + + <% end %> + """ + end + + defp hero_cta_classes(:primary), do: "px-8 py-3 font-semibold transition-all" + defp hero_cta_classes(:secondary), do: "px-8 py-3 font-semibold transition-all" + + defp hero_cta_style(:primary) do + "background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); border: none; cursor: pointer;" + end + + defp hero_cta_style(:secondary) do + "border: 2px solid var(--t-border-default); color: var(--t-text-primary); border-radius: var(--t-radius-button); background: transparent; cursor: pointer;" + end end diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex index d9868e2..27cf00c 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex @@ -11,13 +11,11 @@ <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="contact" mode={:preview} cart_count={2} />
-

- Contact Us -

- -

- Questions about your order or just want to say hello? Drop us a message and we'll get back to you as soon as we can. -

+ <.hero_section + variant={:page} + title="Contact Us" + description="Questions about your order or just want to say hello? Drop us a message and we'll get back to you as soon as we can." + />
diff --git a/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex b/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex index d528dc1..e31d5af 100644 --- a/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex +++ b/lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex @@ -11,34 +11,18 @@ <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="error" mode={:preview} cart_count={2} />
-
-

- 404 -

- -

- Page Not Found -

- -

- Sorry, we couldn't find the page you're looking for. Perhaps you've mistyped the URL or the page has been moved. -

- -
- - - -
+
+ <.hero_section + variant={:error} + pre_title="404" + title="Page Not Found" + description="Sorry, we couldn't find the page you're looking for. Perhaps you've mistyped the URL or the page has been moved." + cta_text="Go to Homepage" + cta_page="home" + secondary_cta_text="Browse Products" + secondary_cta_page="collection" + mode={:preview} + /> <.product_grid columns={:fixed_4} gap="gap-4" class="mt-12 max-w-xl mx-auto"> <%= for product <- Enum.take(@preview_data.products, 4) do %>