mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-07 19:58:24 +00:00
Claude
9ecd4d0e59
- Icons: Patiun stroke icon set (13 approved + 73 new) in src/lib/brand-icons.ts; Icon.astro and a React BrandIcon resolve mdi names to brand icons, keeping mdi only for third-party logos. Inline island icons (mobile menu, carousel, form success, board game shelf, product tile) switched too. - Motifs: layered seal turns in the hero corner; astrolabe on the Professional hero; Starlight recolors of the transmutation seal and tria prima array behind light sections (outlined ring text, no fonts needed). Removed the generic sacred-geometry and astrolabe drawings. - Gold accents: image frames and corner stars, quote bars, dividers (new star-line divider), nav group divider, scrolled nav rule, footer rule. - Nav and footer use the Patiun seal; nav tagline back to "Developer. Maker. Storyteller."; "Web Development · a Patiun LLC company" moved to the footer copyright line. - Mobile menu: Midnight drawer, visible close button. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
62 lines
2.2 KiB
Plaintext
62 lines
2.2 KiB
Plaintext
---
|
|
/**
|
|
* ProductTile.astro
|
|
* ---------------------------------------------------------------------------
|
|
* Compact storefront tile for a product line: the first example image (from the
|
|
* product's `images` array), the title, the summary, and a "View details" hint.
|
|
* Wraps the whole tile in a link to the product page.
|
|
*
|
|
* The full image carousel lives on the product page; this is just the storefront
|
|
* teaser. ProductCard.astro (specs-only) is used on the detail pages.
|
|
*/
|
|
import Icon from '@components/Icon.astro';
|
|
import type { Product } from '@data/store-products';
|
|
|
|
interface Props {
|
|
product: Product;
|
|
href: string;
|
|
}
|
|
|
|
const { product, href } = Astro.props;
|
|
const cover = product.images[0];
|
|
---
|
|
|
|
<a
|
|
href={href}
|
|
class="group card-interactive flex flex-col gap-4 rounded-2xl border p-4"
|
|
style="border-color: var(--color-border); background: var(--color-surface-raised);"
|
|
>
|
|
{cover && (
|
|
<figure class="relative w-full overflow-hidden rounded-xl" style="border: 1px solid var(--color-border);">
|
|
<img
|
|
src={cover.src}
|
|
alt={cover.alt}
|
|
loading="lazy"
|
|
decoding="async"
|
|
class="aspect-[4/3] w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
|
|
/>
|
|
{product.images.length > 1 && (
|
|
<span
|
|
class="pointer-events-none absolute right-2 top-2 inline-flex items-center gap-1 rounded-full px-2 py-1 font-eyebrow text-xs"
|
|
style="color: var(--color-starlight); background: rgba(14,21,34,0.6);"
|
|
>
|
|
<Icon name="gallery" class="h-3.5 w-3.5" />
|
|
{product.images.length}
|
|
</span>
|
|
)}
|
|
</figure>
|
|
)}
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<span class="inline-flex items-center gap-2 font-sans text-lg font-bold" style="color: var(--color-text);">
|
|
<Icon name={product.icon} class="h-5 w-5" style="color: var(--color-accent);" />
|
|
{product.title}
|
|
</span>
|
|
<p class="text-sm leading-relaxed" style="color: var(--color-text-muted);">{product.summary}</p>
|
|
<span class="inline-flex items-center gap-1 text-sm font-medium transition-colors" style="color: var(--color-accent);">
|
|
View details
|
|
<Icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
|
|
</span>
|
|
</div>
|
|
</a>
|