jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

refactor: expand hero_section with page and error variants

Browse Source 
Add variant support to hero_section component:
- :default - Standard hero with section wrapper (home, about)
- :page - Page header style with larger title, more spacing (contact)
- :error - Error page with pre-title (404), dual buttons (error)

Now used in: home, about, contact, error pages

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jamey Greenwood
2026-01-17 14:57:31 +00:00
parent f5b7693b96
commit 1589ebaeca
3 changed files with 164 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex
View File

@@ -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} />
<main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-center" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
Contact Us
</h1>
<p class="text-lg mb-12 text-center max-w-2xl mx-auto" style="color: var(--t-text-secondary);">
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.
</p>
<.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."
/>
<div class="grid gap-8 md:grid-cols-2 mb-12">
<!-- Contact Form -->

40
lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex
View File

@@ -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} />
<main id="main-content" class="flex items-center justify-center" style="min-height: calc(100vh - 4rem);">
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
<h1 class="text-8xl md:text-9xl font-bold mb-4" style="font-family: var(--t-font-heading); color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); font-weight: var(--t-heading-weight);">
404
</h1>
<h2 class="text-3xl md:text-4xl font-bold mb-6" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">
Page Not Found
</h2>
<p class="text-lg mb-8 max-w-md mx-auto" style="color: var(--t-text-secondary);">
Sorry, we couldn't find the page you're looking for. Perhaps you've mistyped the URL or the page has been moved.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button
class="px-8 py-3 font-semibold transition-all"
style="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);"
>
Go to Homepage
</button>
<button
class="px-8 py-3 font-semibold transition-all"
style="border: 2px solid var(--t-border-default); color: var(--t-text-primary); border-radius: var(--t-radius-button);"
>
Browse Products
</button>
</div>
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<.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 %>