Store base

src/components/store/ProductTile.astro

@@ -0,0 +1,65 @@
+---
+/**
+ * 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-mono text-xs"
+          style="color: var(--color-cream); background: rgba(7,10,28,0.6);"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+            <rect x="3" y="5" width="18" height="14" rx="2" />
+            <circle cx="9" cy="12" r="1.6" fill="currentColor" stroke="none" />
+            <circle cx="15" cy="12" r="1.6" fill="currentColor" stroke="none" />
+          </svg>
+          {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>