Images and content updates

src/pages/store/deck-boxes.astro

@@ -9,24 +9,26 @@
  * (deckBoxProduct.images). The specs block is image-free now; examples live in
  * the carousel only.
  */
-import StoreLayout from '@layouts/StoreLayout.astro';
-import Reveal from '@components/motion/Reveal.astro';
-import SectionHeader from '@components/layout/SectionHeader.astro';
-import Icon from '@components/Icon.astro';
-import Carousel from '@components/store/Carousel.tsx';
-import ProductCard from '@components/store/ProductCard.astro';
-import PricingTable from '@components/store/PricingTable.astro';
-import SlotMeter from '@components/store/SlotMeter.astro';
-import RequirementList from '@components/store/RequirementList.astro';
-import { deckBoxProduct, requirements } from '@data/store-products';
-import { storeAvailability } from '@data/store-availability';
+import StoreLayout from "@layouts/StoreLayout.astro";
+import Reveal from "@components/motion/Reveal.astro";
+import SectionHeader from "@components/layout/SectionHeader.astro";
+import Icon from "@components/Icon.astro";
+import Carousel from "@components/store/Carousel.tsx";
+import ProductCard from "@components/store/ProductCard.astro";
+import PricingTable from "@components/store/PricingTable.astro";
+import SlotMeter from "@components/store/SlotMeter.astro";
+import ColorGrid from "@components/store/ColorGrid.astro";
+import RequirementList from "@components/store/RequirementList.astro";
+import { deckBoxProduct, requirements } from "@data/store-products";
+import { storeAvailability } from "@data/store-availability";
 
 const av = storeAvailability;
 const slot = av.slots[deckBoxProduct.slotKey];
-const keyReqs = requirements.filter((r) =>
-  r.title.toLowerCase().includes('final')
-  || r.title.toLowerCase().includes('capacity')
-  || r.title.toLowerCase().includes('affiliation'),
+const keyReqs = requirements.filter(
+  (r) =>
+    r.title.toLowerCase().includes("final") ||
+    r.title.toLowerCase().includes("capacity") ||
+    r.title.toLowerCase().includes("affiliation"),
 );
 ---
 
@@ -48,28 +50,54 @@ const keyReqs = requirements.filter((r) =>
         </a>
       </Reveal>
       <Reveal delay={60}>
-        <SectionHeader kicker="Product" icon={deckBoxProduct.icon} title={deckBoxProduct.title} subtitle={deckBoxProduct.summary} />
+        <SectionHeader
+          kicker="Product"
+          icon={deckBoxProduct.icon}
+          title={deckBoxProduct.title}
+          subtitle={deckBoxProduct.summary}
+        />
       </Reveal>
     </section>
 
     {/* Live slot tracker for this product line (top of content). */}
     <section class="flex flex-col gap-3">
       <Reveal>
-        <SlotMeter label="3D-print slots" icon="printer-3d-nozzle" open={slot.open} total={slot.total} />
+        <SlotMeter
+          label="3D-print slots"
+          icon="printer-3d-nozzle"
+          open={slot.open}
+          total={slot.total}
+        />
       </Reveal>
     </section>
 
     {/* Image carousel (server-driven, swipeable). */}
     <section class="flex flex-col gap-4">
-      <Reveal><SectionHeader kicker="Examples" icon="image-multiple" title={`See the ${deckBoxProduct.title.toLowerCase()}`} /></Reveal>
+      <Reveal
+        ><SectionHeader
+          kicker="Examples"
+          icon="image-multiple"
+          title={`See the ${deckBoxProduct.title.toLowerCase()}`}
+        /></Reveal
+      >
       <Reveal delay={60}>
-        <Carousel client:visible slides={deckBoxProduct.images} label={`${deckBoxProduct.title} examples`} />
+        <Carousel
+          client:visible
+          slides={deckBoxProduct.images}
+          label={`${deckBoxProduct.title} examples`}
+        />
       </Reveal>
     </section>
 
     {/* Specifications (no image — examples live in the carousel). */}
     <section class="flex flex-col gap-6">
-      <Reveal><SectionHeader kicker="Details" icon="ruler" title="Specifications" /></Reveal>
+      <Reveal
+        ><SectionHeader
+          kicker="Details"
+          icon="ruler"
+          title="Specifications"
+        /></Reveal
+      >
       <Reveal delay={60}>
         <ProductCard product={deckBoxProduct} detailed />
       </Reveal>
@@ -77,7 +105,13 @@ const keyReqs = requirements.filter((r) =>
 
     {/* Pricing */}
     <section class="flex flex-col gap-6">
-      <Reveal><SectionHeader kicker="Pricing" icon="currency-usd" title="Prints" /></Reveal>
+      <Reveal
+        ><SectionHeader
+          kicker="Pricing"
+          icon="currency-usd"
+          title="Prints"
+        /></Reveal
+      >
       <Reveal delay={60}>
         <PricingTable
           icon="printer-3d-nozzle"
@@ -88,9 +122,29 @@ const keyReqs = requirements.filter((r) =>
       </Reveal>
     </section>
 
+    {/* Available print colors (filament). Managed in store-products.ts. */}
+    <section class="flex flex-col gap-6">
+      <Reveal
+        ><SectionHeader
+          kicker="Colors"
+          icon="palette"
+          title="Available print colors"
+        /></Reveal
+      >
+      <Reveal delay={60}>
+        <ColorGrid colors={deckBoxProduct.colors} />
+      </Reveal>
+    </section>
+
     {/* Key requirements */}
     <section class="flex flex-col gap-6">
-      <Reveal><SectionHeader kicker="Before you order" icon="clipboard-check" title="Key requirements" /></Reveal>
+      <Reveal
+        ><SectionHeader
+          kicker="Before you order"
+          icon="clipboard-check"
+          title="Key requirements"
+        /></Reveal
+      >
       <Reveal delay={60}>
         <RequirementList items={keyReqs} />
       </Reveal>
@@ -101,7 +155,7 @@ const keyReqs = requirements.filter((r) =>
       <div class="flex flex-col items-center gap-4 text-center">
         <a href="/store/order" class="btn btn-primary">
           <Icon name="clipboard-list" class="h-5 w-5" />
-          {av.ordersOpen ? 'Start an order request' : 'View order page'}
+          {av.ordersOpen ? "Start an order request" : "View order page"}
         </a>
       </div>
     </Reveal>