store

Author: saadeghi

packages/docs/src/lib/data/store.yaml

@@ -1,4 +1,36 @@
 productCustomAttributes:
+  - id: 479479
+    media:
+      - type: image
+        sm: https://img.daisyui.com/images/store/small/blink/blink-08.webp
+        lg: https://img.daisyui.com/images/store/large/blink/blink-08.webp
+      - type: image
+        sm: https://img.daisyui.com/images/store/small/blink/blink-01.webp
+        lg: https://img.daisyui.com/images/store/large/blink/blink-01.webp
+      - type: image
+        sm: https://img.daisyui.com/images/store/small/blink/blink-03.webp
+        lg: https://img.daisyui.com/images/store/large/blink/blink-03.webp
+      - type: image
+        sm: https://img.daisyui.com/images/store/small/blink/blink-06.webp
+        lg: https://img.daisyui.com/images/store/large/blink/blink-06.webp
+      - type: image
+        sm: https://img.daisyui.com/images/store/small/blink/blink-05.webp
+        lg: https://img.daisyui.com/images/store/large/blink/blink-05.webp
+      - type: image
+        sm: https://img.daisyui.com/images/store/small/blink/blink-04.webp
+        lg: https://img.daisyui.com/images/store/large/blink/blink-04.webp
+      - type: image
+        sm: https://img.daisyui.com/images/store/small/blink/blink-07.webp
+        lg: https://img.daisyui.com/images/store/large/blink/blink-07.webp
+    links:
+      license: https://api.daisyui.com/license/agency-landing@1.txt
+      screenshot: https://img.daisyui.com/images/store/screenshots/blink.webp
+    tech: [react, svelte, vite]
+    tags: [landing]
+    badge:
+      class: badge-success
+      icon: check
+      text: Updated to daisyUI 5.0
   - id: 426780
     faq:
       - Q: Can I use this template without Lemon Squeezy?
@@ -272,32 +304,6 @@ productCustomAttributes:
       class: badge-success
       icon: check
       text: Updated to daisyUI 5.0
-  - id: 144550
-    media:
-      - type: image
-        sm: https://img.daisyui.com/images/store/small/agency-landing/agency-landing-2.webp
-        lg: https://img.daisyui.com/images/store/large/agency-landing/agency-landing-2.webp
-      - type: image
-        sm: https://img.daisyui.com/images/store/small/agency-landing/agency-landing-1.webp
-        lg: https://img.daisyui.com/images/store/large/agency-landing/agency-landing-1.webp
-      - type: image
-        sm: https://img.daisyui.com/images/store/small/agency-landing/agency-landing-3.webp
-        lg: https://img.daisyui.com/images/store/large/agency-landing/agency-landing-3.webp
-      - type: image
-        sm: https://img.daisyui.com/images/store/small/agency-landing/agency-landing-4.webp
-        lg: https://img.daisyui.com/images/store/large/agency-landing/agency-landing-4.webp
-      - type: image
-        sm: https://img.daisyui.com/images/store/small/agency-landing/agency-landing-5.webp
-        lg: https://img.daisyui.com/images/store/large/agency-landing/agency-landing-5.webp
-    links:
-      license: https://api.daisyui.com/license/agency-landing@1.txt
-      screenshot: https://img.daisyui.com/images/store/screenshots/agency-landingpage-react.webp
-    tech: [react, svelte, vite, framer]
-    tags: [landing]
-    badge:
-      class: badge-info
-      icon: wait
-      text: daisyUI 5.0 update coming soon
   - id: 130237
     media:
       - type: image
@@ -386,7 +392,7 @@ tech:
 techFilters: [all, html, react, vue, svelte, astro]
 
 futureProducts:
-  - Updates for Tailwind CSS 4 and daisyUI 5
+  - Scalo startup template
   - Official daisyUI Figma Library v2.0 update
   - Headless UI + daisyUI component pack for Vue
 

packages/docs/src/routes/(routes)/store/[productId]/+page.svelte

@@ -202,19 +202,22 @@
         <!-- Thumbnail Navigation -->
         {#if data.product.media.length > 1}
           <div class="-mx-4 overflow-x-auto">
-            <div class="flex flex-wrap gap-2 p-4">
+            <div
+              class="grid grid-cols-6 gap-2 p-4 sm:grid-cols-8 md:grid-cols-10 lg:grid-cols-12 xl:grid-cols-8"
+            >
               {#each data.product.media as media, i}
                 <button
-                  class="border-base-content/15 h-8 w-11 shrink-0 cursor-pointer overflow-hidden rounded-sm border outline-2 outline-offset-2"
+                  class="border-base-content/15 aspect-[4/3] shrink-0 cursor-pointer overflow-hidden rounded-sm border outline-2 outline-offset-2"
                   class:outline-base-content={i === currentIndex}
                   class:outline-transparent={i !== currentIndex}
                   onclick={() => (currentIndex = i)}
                 >
                   {#if media.type === "image"}
                     <img
-                      src={media.sm}
+                      src={media.lg}
                       alt={`${data.product.attributes.name} thumbnail ${i + 1}`}
-                      class="h-full w-full object-cover brightness-90"
+                      class="h-full w-full bg-cover object-cover brightness-90"
+                      style={`background-image:url(${media.sm});`}
                     />
                   {:else}
                     <div
@@ -226,7 +229,7 @@
                         alt={data.product.attributes.name}
                       />
                       <svg
-                        class="z-1 size-5 text-black"
+                        class="z-1 size-6 text-black"
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 24 24"
                         ><g