negodesign 0.0.25 → 0.0.26

package/dist/components/core/card/highlight/01/CardHighlight01.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import Button from "../../../../ui/button/button.svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import { t } from "../../../../../i18n";
+  import CardDescription from "../../shared/CardDescription.svelte";
+  import CardFavorite from "../../shared/CardFavorite.svelte";
+  import CardTags from "../../shared/CardTags.svelte";
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardHighlightProps } from "../../types";
+
+  let {
+    id,
+    logo,
+    tags,
+    title,
+    content,
+    imageUrl,
+    isLoading = false,
+    isFavorite = false,
+    buttonText,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    onClickBtn,
+    onClickFavorite,
+  }: CardHighlightProps = $props();
+</script>
+
+<article
+  class="flex gap-1 bg-white dark:bg-background p-3 rounded-lg shadow border"
+>
+  <aside class="relative rounded-lg border h-50">
+    <div class="left-1 z-2 flex gap-1 w-50">
+      {#if isLoading}
+        <Skeleton class="w-hull h-full rounded-lg" />
+      {:else if logo}
+        <img src={logo} alt={title} class="rounded-lg" />
+      {/if}
+    </div>
+
+    <div class="absolute top-3 right-1">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        {isLoading}
+        onFavoriteClick={() => onClickFavorite?.(id)}
+      />
+    </div>
+
+    {#if isLoading}
+      <Skeleton class="rounded-lg w-full h-full object-cover object-center" />
+    {:else if imageUrl}
+      <img
+        src={imageUrl}
+        alt={imageUrl}
+        class="rounded-lg w-full h-full object-cover object-center"
+      />
+    {/if}
+    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
+  </aside>
+  <div class="px-5">
+    <div class="p-2 rounded-md">
+      {#if isLoading}
+        <Skeleton class="h-4 w-30 rounded-lg" />
+      {:else if title}
+        <div class="font-semibold">{title}</div>
+      {/if}
+    </div>
+
+    <div class="w-75">
+      <CardDescription
+        {content}
+        {isLoading}
+        {isDescriptionIcon}
+        {isDescriptionLabel}
+      />
+    </div>
+
+    <CardTags {tags} {isLoading} />
+
+    {#if isLoading}
+      <Skeleton class="h-10 w-full rounded-md mt-2 md:mt-3" />
+    {:else}
+      <Button onclick={() => onClickBtn!(id)} class="mt-2 md:mt-3 md:min-w-32">
+        {buttonText || $t("label.buy")}
+      </Button>
+    {/if}
+  </div>
+</article>

package/dist/components/core/card/highlight/01/CardHighlight01.svelte.d.ts

@@ -0,0 +1,8 @@
+/**
+   * Card component with a title and content.
+   * @component
+   */
+import type { CardHighlightProps } from "../../types";
+declare const CardHighlight01: import("svelte").Component<CardHighlightProps, {}, "">;
+type CardHighlight01 = ReturnType<typeof CardHighlight01>;
+export default CardHighlight01;

package/dist/components/core/card/highlight/02/CardHighlight02.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import Button from "../../../../ui/button/button.svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import { t } from "../../../../../i18n";
+  import CardDescription from "../../shared/CardDescription.svelte";
+  import CardFavorite from "../../shared/CardFavorite.svelte";
+  import CardTags from "../../shared/CardTags.svelte";
+  /**
+   * Card component with a title and content.
+   * @component
+   */
+  import type { CardHighlightProps } from "../../types";
+
+  let {
+    id,
+    logo,
+    tags,
+    title,
+    content,
+    imageUrl,
+    isLoading = false,
+    isFavorite = false,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    buttonText,
+    onClickBtn,
+    onClickFavorite,
+  }: CardHighlightProps = $props();
+</script>
+
+<article
+  class="flex flex-col gap-1 bg-white dark:bg-background p-3 rounded-lg shadow border"
+>
+  <aside class="relative rounded-lg border h-50">
+    <div class="left-1 z-2 flex gap-1 w-50">
+      {#if isLoading}
+        <Skeleton class="w-hull h-full rounded-lg" />
+      {:else if logo}
+        <img src={logo} alt={title} class="rounded-lg" />
+      {/if}
+    </div>
+
+    <div class="absolute top-3 right-1">
+      <CardFavorite
+        {id}
+        {isFavorite}
+        {isLoading}
+        onFavoriteClick={() => onClickFavorite?.(id)}
+      />
+    </div>
+
+    {#if isLoading}
+      <Skeleton class="rounded-lg w-full h-full object-cover object-center" />
+    {:else if imageUrl}
+      <img
+        src={imageUrl}
+        alt={imageUrl}
+        class="rounded-lg w-full h-full object-cover object-center"
+      />
+    {/if}
+    <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
+  </aside>
+  <div class="px-2">
+    <div class="rounded-md">
+      {#if isLoading}
+        <Skeleton class="h-4 w-30 rounded-lg" />
+      {:else if title}
+        <div class="font-semibold my-2">{title}</div>
+      {/if}
+    </div>
+
+    <div class="w-75 my-2">
+      <CardDescription
+        {content}
+        {isLoading}
+        {isDescriptionIcon}
+        {isDescriptionLabel}
+      />
+    </div>
+
+    <div class="my-2">
+      <CardTags {tags} {isLoading} />
+    </div>
+
+    {#if isLoading}
+      <Skeleton class="h-10 w-full rounded-md mt-2 md:mt-3" />
+    {:else}
+      <Button onclick={() => onClickBtn!(id)} class="mt-2 md:mt-3 md:min-w-32">
+        {buttonText || $t("label.buy")}
+      </Button>
+    {/if}
+  </div>
+</article>

package/dist/components/core/card/highlight/02/CardHighlight02.svelte.d.ts

@@ -0,0 +1,8 @@
+/**
+   * Card component with a title and content.
+   * @component
+   */
+import type { CardHighlightProps } from "../../types";
+declare const CardHighlight02: import("svelte").Component<CardHighlightProps, {}, "">;
+type CardHighlight02 = ReturnType<typeof CardHighlight02>;
+export default CardHighlight02;

package/dist/components/core/card/highlight/CardHighlight.svelte

@@ -1,67 +1,22 @@
 <script lang="ts">
-  import Skeleton from "../../../ui/skeleton/skeleton.svelte";
-  import CardFavorite from "../shared/CardFavorite.svelte";
   /**
    * Card component with a title and content.
    * @component
    */
-  import type { CardPromotionProps } from "../types";
+  import type { CardHighlightProps } from "../types";
+  import CardHighlight01 from "./01/CardHighlight01.svelte";
+  import CardHighlight02 from "./02/CardHighlight02.svelte";
 
   let {
-    id,
-    logo,
-    imageUrl,
-    title,
-    isLoading = false,
-    isFavorite = false,
-    onClickFavorite,
-  }: CardPromotionProps = $props();
+    varient = 1,
+    ...restProps
+  }: CardHighlightProps & {
+    varient?: 1 | 2;
+  } = $props();
 </script>
 
-<article class="relative rounded-sm">
-  {#if logo}
-    <div class="absolute top-1 left-1 z-2 flex gap-1 p-2">
-      {#if isLoading}
-        <Skeleton class="h-30 w-30 rounded-lg" />
-      {:else}
-        <img src={logo} width={30} height={30} alt={title} class="rounded-lg" />
-      {/if}
-    </div>
-  {/if}
-
-  <div class="absolute top-1 right-1 z-2 flex gap-1 p-2">
-    <CardFavorite
-      {id}
-      {isFavorite}
-      {isLoading}
-      onFavoriteClick={() => onClickFavorite?.(id)}
-    />
-  </div>
-
-  {#if imageUrl}
-    {#if isLoading}
-      <Skeleton
-        class="rounded-lg md:h-37.5 md:w-37.5 lg:h-50 lg:w-50 object-cover object-center"
-      />
-    {:else}
-      <img
-        src={imageUrl}
-        alt={imageUrl}
-        class="rounded-lg md:h-37.5 md:w-37.5 lg:h-50 lg:w-50 object-cover object-center"
-      />
-    {/if}
-  {/if}
-  <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
-
-  <div
-    class="absolute bottom-1 inset-x-0 flex justify-center m-auto bg-black/10 backdrop-blur-sm max-w-11/12 p-2 rounded-md"
-  >
-    {#if title}
-      {#if isLoading}
-        <Skeleton class="h-4 w-30 rounded-lg" />
-      {:else}
-        <div class="text-center font-semibold text-[12px]">{title}</div>
-      {/if}
-    {/if}
-  </div>
-</article>
+{#if varient == 2}
+  <CardHighlight02 {...restProps} />
+{:else}
+  <CardHighlight01 {...restProps} />
+{/if}

package/dist/components/core/card/highlight/CardHighlight.svelte.d.ts

@@ -2,7 +2,10 @@
    * Card component with a title and content.
    * @component
    */
-import type { CardPromotionProps } from "../types";
-declare const CardHighlight: import("svelte").Component<CardPromotionProps, {}, "">;
+import type { CardHighlightProps } from "../types";
+type $$ComponentProps = CardHighlightProps & {
+    varient?: 1 | 2;
+};
+declare const CardHighlight: import("svelte").Component<$$ComponentProps, {}, "">;
 type CardHighlight = ReturnType<typeof CardHighlight>;
 export default CardHighlight;

package/dist/components/core/card/highlight/data.js

@@ -1,31 +1,62 @@
+import { GlobalIcon, MapPin, NecklaceIcon } from "@hugeicons/core-free-icons";
 const items = [
     {
         id: 1,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         title: 'Hotel Baía Azul',
         isFavorite: true,
+        content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum",
+        tags: [
+            { icon: GlobalIcon, text: 'Luanda', },
+            { icon: MapPin, text: 'Kilamba', },
+            { icon: NecklaceIcon, text: 'Rua 19', },
+        ]
     },
     {
         id: 2,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         title: 'Miramar Suites',
+        content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum",
+        tags: [
+            { icon: GlobalIcon, text: 'Luanda', },
+            { icon: MapPin, text: 'Kilamba', },
+            { icon: NecklaceIcon, text: 'Rua 19', },
+        ]
     },
     {
         id: 3,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         title: 'Palm Resort & Spa',
-        isFavorite: true
+        isFavorite: true,
+        content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum",
+        tags: [
+            { icon: GlobalIcon, text: 'Luanda', },
+            { icon: MapPin, text: 'Kilamba', },
+            { icon: NecklaceIcon, text: 'Rua 19', },
+        ]
     },
     {
         id: 4,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         title: 'Hotel Central Park',
+        content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum",
+        tags: [
+            { icon: GlobalIcon, text: 'Luanda', },
+            { icon: MapPin, text: 'Kilamba', },
+            { icon: NecklaceIcon, text: 'Rua 19', },
+        ]
     },
     {
         id: 5,
         imageUrl: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
         title: 'Villa Serena Boutique',
         isFavorite: true,
+        content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since 1966, when designers at Letraset and James Mosley, the librarian at St Bride Printing Library in London, took a 1914 Cicero translation and scrambled it to make dummy text for Letraset's Body Type sheets. It has survived not only many decades, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised thanks to these sheets and more recently with desktop publishing software like Aldus PageMaker and Microsoft Word including versions of Lorem Ipsum",
+        tags: [
+            { icon: GlobalIcon, text: 'Luanda', },
+            { icon: MapPin, text: 'Kilamba', },
+            { icon: NecklaceIcon, text: 'Rua 19', },
+        ]
     },
 ];
 export default items;

package/dist/components/core/card/media/01/CardMedia01.svelte

@@ -58,28 +58,25 @@
                     <div class="text-center font-bold text-lg">{title}</div>
                 {/if}
                 {#if startNumber}
-                    <CardStarRating startNumber={startNumber} startMax={startMax} />
+                    <CardStarRating {startNumber} {startMax} />
                 {/if}
             </div>
         </div>
         <div class="flex justify-end items-center">
             <CardFavorite
-                isFavorite={isFavorite}
+                {id}
+                {isFavorite}
                 onFavoriteClick={() => onFavoriteClick!(id)}
             />
         </div>
     </div>
 
     <div class="h-15 my-2">
-        <CardDescription content={content}/>
+        <CardDescription {content} />
     </div>
 
-    <CardTags
-        className="my-6"
-        tags={tags ?? []}
-        isTagBorderBottom={isTagBorderBottom}
-    />    
-    
+    <CardTags className="my-6" tags={tags ?? []} {isTagBorderBottom} />
+
     <CardThumbnailVideo
         {imageUrl}
         {videoUrl}
@@ -91,7 +88,7 @@
         <div class="flex justify-center items-center gap-2 mt-4 w-full">
             {#if onButtonProfile}
                 <CardButton
-                    id={id}
+                    {id}
                     icon={UserIcon}
                     className={buttonProfileClass}
                     text={$t("label.view.profile")}
@@ -101,7 +98,7 @@
             {/if}
             {#if onButtonDetails}
                 <CardButton
-                    id={id}
+                    {id}
                     icon={InformationCircleIcon}
                     className={buttonDetailsClass}
                     text={$t("label.more.details")}

package/dist/components/core/card/media/02/CardMedia02.svelte

@@ -58,21 +58,18 @@
                     <div class="text-center font-bold text-lg">{title}</div>
                 {/if}
                 {#if startNumber}
-                    <CardStarRating startNumber={startNumber} startMax={startMax} />
+                    <CardStarRating {startNumber} {startMax} />
                 {/if}
             </div>
         </div>
         <div class="flex justify-end items-center absolute top-0 right-0">
             <CardFavorite
-                isFavorite={isFavorite}
+                {id}
+                {isFavorite}
                 onFavoriteClick={() => onFavoriteClick!(id)}
             />
         </div>
-        <CardTags
-            className="my-4"
-            tags={tags ?? []}
-            {isTagBorderBottom}
-        />
+        <CardTags className="my-4" tags={tags ?? []} {isTagBorderBottom} />
     </div>
 
     <div class="h-15 mb-8">

package/dist/components/core/card/profile/01/CardProfile01.svelte

@@ -52,33 +52,30 @@
                     <div class="text-center font-bold text-lg">{title}</div>
                 {/if}
                 {#if startNumber}
-                    <CardStarRating startNumber={startNumber} startMax={startMax} />
+                    <CardStarRating {startNumber} {startMax} />
                 {/if}
             </div>
         </div>
         <div class="flex justify-end items-center">
             <CardFavorite
-                isFavorite={isFavorite}
+                {id}
+                {isFavorite}
                 onFavoriteClick={() => onFavoriteClick!(id)}
             />
         </div>
     </div>
 
     <div class="h-15 my-2">
-        <CardDescription content={content}/>
+        <CardDescription {content} />
     </div>
 
-    <CardTags
-        className="my-6"
-        tags={tags ?? []}
-        isTagBorderBottom={isTagBorderBottom}
-    />    
+    <CardTags className="my-6" tags={tags ?? []} {isTagBorderBottom} />
 
     {#if onButtonProfile || onButtonDetails}
         <div class="flex justify-center items-center gap-2 mt-4 w-full">
             {#if onButtonProfile}
                 <CardButton
-                    id={id}
+                    {id}
                     icon={UserIcon}
                     className={buttonProfileClass}
                     text={$t("label.view.profile")}
@@ -88,7 +85,7 @@
             {/if}
             {#if onButtonDetails}
                 <CardButton
-                    id={id}
+                    {id}
                     icon={InformationCircleIcon}
                     className={buttonDetailsClass}
                     text={$t("label.more.details")}

package/dist/components/core/card/profile/02/CardProfile02.svelte

@@ -58,6 +58,7 @@
         </div>
         <div class="flex justify-end items-center absolute top-0 right-0">
             <CardFavorite
+                {id}
                 {isFavorite}
                 onFavoriteClick={() => onFavoriteClick!(id)}
             />
@@ -68,7 +69,7 @@
         <CardDescription {content} />
     </div>
 
-    <CardTags className="my-4" tags={tags ?? []} {isTagBorderBottom}/>
+    <CardTags className="my-4" tags={tags ?? []} {isTagBorderBottom} />
 
     {#if onButtonProfile || onButtonDetails}
         <div class="flex justify-center items-center gap-2 mt-4 w-full">

package/dist/components/core/card/promotion/CardPromotion.svelte

@@ -3,7 +3,10 @@
   import Skeleton from "../../../ui/skeleton/skeleton.svelte";
   import { t } from "../../../../i18n";
   import CardCart from "../shared/CardCart.svelte";
+  import CardDescription from "../shared/CardDescription.svelte";
   import CardFavorite from "../shared/CardFavorite.svelte";
+  import CardStartPrice from "../shared/CardStartPrice.svelte";
+  import CardTags from "../shared/CardTags.svelte";
   /**
    * Card component with a title and content.
    * @component
@@ -12,28 +15,34 @@
 
   let {
     id,
+    tags,
     logo,
-    imageUrl,
     title,
+    imageUrl,
     isFavorite = false,
     isCart = false,
     isLoading = false,
     newPrice,
     oldPrice,
+    content,
     buttonBuyText,
+    isDescriptionIcon,
+    isDescriptionLabel,
     onClickBuy,
     onClickShop,
     onClickFavorite,
   }: CardPromotionProps = $props();
 </script>
 
-<article class="relative rounded-sm bg-background">
-  <div class="relative w-full p-2">
-    {#if logo}
-      <div class="absolute top-1 left-1 z-2 hidden gap-1 p-2">
+<article class="relative rounded-lg border">
+  <aside class="relative w-full">
+    <div class="absolute top-1 left-1 z-2 gap-1 p-2">
+      {#if isLoading}
+        <Skeleton class="h-5 w-20 rounded-full bg-black/20" />
+      {:else if logo}
         <img src={logo} width={30} height={30} alt={title} class="rounded-lg" />
-      </div>
-    {/if}
+      {/if}
+    </div>
 
     <div class="absolute top-1 right-1 z-2 flex items-center gap-1 p-2">
       <CardFavorite
@@ -45,42 +54,24 @@
       <CardCart {id} {isCart} {isLoading} onCartClick={onClickShop} />
     </div>
 
-    {#if imageUrl}
-      {#if isLoading}
-        <Skeleton
-          class="rounded-lg md:h-37.5 md:w-37.5 lg:h-50 lg:w-50 object-cover object-center"
-        />
-      {:else}
-        <img
-          src={imageUrl}
-          alt={imageUrl}
-          class="rounded-lg md:h-37.5 md:w-37.5 lg:h-50 lg:w-50 object-cover object-center"
-        />
-      {/if}
+    {#if isLoading}
+      <Skeleton
+        class="rounded-lg md:h-25 md:w-25 lg:h-45 lg:w-45 object-cover object-center bg-black/15"
+      />
+    {:else if imageUrl}
+      <img
+        src={imageUrl}
+        alt={imageUrl}
+        class="rounded-tr-lg rounded-tl-lg h-25 lg:h-45 w-full object-cover object-center"
+      />
     {/if}
     <div class="absolute inset-0 bg-black/5 rounded-sm h-full w-full"></div>
+  </aside>
 
-    {#if newPrice || oldPrice}
-      <div class="absolute bottom-2 right-3 z-2 flex items-center gap-2 mb-1">
-        {#if oldPrice}
-          <div
-            class="text-[10px] md:text-sm line-through bg-red-500 text-white p-1 rounded-sm"
-          >
-            {oldPrice}
-          </div>
-        {/if}
-        {#if newPrice}
-          <div class="font-bold text-lg md:text-xl lg:text-2xl relative">
-            {newPrice}
-          </div>
-        {/if}
-      </div>
-    {/if}
-  </div>
-  <div
+  <aside
     class="bottom-1 inset-x-0 flex flex-col items-center justify-center gap-0.5 m-auto max-w-11/12 p-1 rounded-md"
   >
-    <div class="flex justify-between w-full items-center">
+    <div class="flex justify-between w-full items-center mb-1">
       {#if title}
         {#if isLoading}
           <Skeleton class="h-4 w-30 rounded-lg" />
@@ -91,6 +82,25 @@
         {/if}
       {/if}
     </div>
+
+    <div>
+      <CardDescription {content} {isDescriptionIcon} {isDescriptionLabel} />
+    </div>
+
+    <div class="w-full mb-3">
+      <CardTags {tags} />
+    </div>
+
+    <div class="flex justify-start gap-2 w-full">
+      {#if isLoading}
+        <Skeleton class="h-5 bg-black/10 w-25 my-2 mr-2" />
+      {:else if newPrice || oldPrice}
+        <div>
+          <CardStartPrice {newPrice} {oldPrice} />
+        </div>
+      {/if}
+    </div>
+
     {#if isLoading}
       <Skeleton class="h-9 w-full rounded-md" />
     {:else}
@@ -98,5 +108,5 @@
         {buttonBuyText || $t("label.buy")}
       </Button>
     {/if}
-  </div>
+  </aside>
 </article>