negodesign 0.0.36 → 0.0.38

package/dist/components/core/carousel/promotion/ui/CarouselPromotion.svelte

@@ -1,47 +1,67 @@
-<script lang="ts">
-  import CardPromotion from "../../../card/promotion/CardPromotion.svelte";
-  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
-  import * as Carousel from "../../../../ui/carousel/index.js";
-  import type { CarouselPromotionProps } from "../types";
-  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
-  import { useDevice } from "../../../../../hooks/responsive.svelte";
-  import Autoplay from "embla-carousel-autoplay";
-
-  const {
-    headerProps,
-    slotProps,
-    items,
-    isLoading = false,
-    isDescriptionIcon,
-    isDescriptionLabel,
-  }: CarouselPromotionProps = $props();
-
-  const responsive = useDevice();
-</script>
-
-<CarouselHeader {...headerProps}>
-  <CarouselSlot
-    {...slotProps}
-    containerClass="w-full"
-    plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
-  >
-    {#if isLoading}
-      {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
-        <Carousel.Item class="pl-5 w-75 basis-auto">
-          <CardPromotion
-            id={i}
-            {isLoading}
-            {isDescriptionIcon}
-            {isDescriptionLabel}
-          />
-        </Carousel.Item>
-      {/each}
-    {:else}
-      {#each items as item, i (`promotion-${item.id ?? i}`)}
-        <Carousel.Item class="pl-2 w-75 basis-auto">
-          <CardPromotion {...item} {isDescriptionIcon} {isDescriptionLabel} />
-        </Carousel.Item>
-      {/each}
-    {/if}
-  </CarouselSlot>
-</CarouselHeader>
+<script lang="ts">
+  import CardPromotion from "../../../card/promotion/CardPromotion.svelte";
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import NotFoundEmpty from "../../../panel/NotFoundEmpty.svelte";
+  import * as Carousel from "../../../../ui/carousel/index.js";
+  import type { CarouselPromotionProps } from "../types";
+  import CarouselHeader from "../../shared/ui/CarouselHeader.svelte";
+  import { useDevice } from "../../../../../hooks/responsive.svelte";
+  import { t } from "../../../../../i18n";
+  import Autoplay from "embla-carousel-autoplay";
+
+  const {
+    headerProps,
+    slotProps,
+    items,
+    isLoading = false,
+    isDescriptionIcon,
+    isDescriptionLabel,
+    onClickBuy,
+    onClickShop,
+    onClickFavorite,
+  }: CarouselPromotionProps = $props();
+
+  const responsive = useDevice();
+  const isEmpty = $derived(!isLoading && (!items || items.length === 0));
+</script>
+
+<CarouselHeader {...headerProps}>
+  {#if isEmpty}
+    <NotFoundEmpty
+      title={$t("empty.promotions.title")}
+      description={$t("empty.promotions.description")}
+    />
+  {:else}
+    <CarouselSlot
+      {...slotProps}
+      containerClass="w-full"
+      plugins={[Autoplay({ delay: 4000, stopOnInteraction: true })]}
+    >
+      {#if isLoading}
+        {#each Array.from( { length: responsive.isMobile ? 5 : 10 }, ) as _, i (`loading-${i}`)}
+          <Carousel.Item class="pl-5 w-75 basis-auto">
+            <CardPromotion
+              id={i}
+              {isLoading}
+              {isDescriptionIcon}
+              {isDescriptionLabel}
+            />
+          </Carousel.Item>
+        {/each}
+      {:else}
+        {#each items as item, i (`promotion-${item.id ?? i}`)}
+          <Carousel.Item class="pl-2 w-75 basis-auto">
+            <CardPromotion
+              {...item}
+              {isDescriptionIcon}
+              {isDescriptionLabel}
+              {onClickBuy}
+              {onClickShop}
+              {onClickFavorite}
+            />
+          </Carousel.Item>
+        {/each}
+      {/if}
+    </CarouselSlot>
+  {/if}
+</CarouselHeader>

package/dist/components/core/panel/NotFoundEmpty.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import * as Empty from "../../ui/empty/index.js";
+  import { t } from "../../../i18n";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { Search01Icon } from "@hugeicons/core-free-icons";
+  import type { Snippet } from "svelte";
+  import type { IconSvgElement } from "@hugeicons/svelte";
+
+  type Props = {
+    title?: string;
+    description?: string;
+    icon?: IconSvgElement;
+    className?: string;
+    actionHref?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+    showAction?: boolean;
+    children?: Snippet;
+  };
+
+  let {
+    title,
+    description,
+    icon = Search01Icon,
+    className = "",
+    actionHref = "#/",
+    actionLabel,
+    onAction,
+    showAction = false,
+    children,
+  }: Props = $props();
+
+  const resolvedTitle = $derived(title ?? $t("empty.title"));
+  const resolvedDescription = $derived(description ?? $t("empty.description"));
+</script>
+
+<Empty.Root class="w-full py-8 {className}">
+  <Empty.Header>
+    {#if icon}
+      <Empty.Media variant="icon">
+        <HugeiconsIcon {icon} class="size-6 text-muted-foreground" />
+      </Empty.Media>
+    {/if}
+    <Empty.Title class="text-base font-semibold">
+      {resolvedTitle}
+    </Empty.Title>
+    <Empty.Description class="text-sm text-muted-foreground max-w-sm">
+      {resolvedDescription}
+    </Empty.Description>
+  </Empty.Header>
+
+  {#if children}
+    <Empty.Content>
+      {@render children()}
+    </Empty.Content>
+  {:else if showAction || onAction}
+    <Empty.Content>
+      {#if onAction}
+        <button
+          type="button"
+          onclick={onAction}
+          class="text-xs font-medium text-primary hover:underline"
+        >
+          {actionLabel ?? $t("empty.contact_support")}
+        </button>
+      {:else}
+        <Empty.Description class="text-xs">
+          {$t("empty.support")}
+          <a href={actionHref} class="text-primary hover:underline font-medium ml-1">
+            {actionLabel ?? $t("empty.contact_support")}
+          </a>
+        </Empty.Description>
+      {/if}
+    </Empty.Content>
+  {/if}
+</Empty.Root>

package/dist/components/core/panel/NotFoundEmpty.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+import type { IconSvgElement } from "@hugeicons/svelte";
+type Props = {
+    title?: string;
+    description?: string;
+    icon?: IconSvgElement;
+    className?: string;
+    actionHref?: string;
+    actionLabel?: string;
+    onAction?: () => void;
+    showAction?: boolean;
+    children?: Snippet;
+};
+declare const NotFoundEmpty: import("svelte").Component<Props, {}, "">;
+type NotFoundEmpty = ReturnType<typeof NotFoundEmpty>;
+export default NotFoundEmpty;

package/dist/components/pages/company-profile/CompanyProfile.svelte

@@ -27,16 +27,13 @@
   import ProfileMenuBadge from "./shared/ProfileMenuBadge.svelte";
   import ProfileAboutCompany from "./shared/ProfileAboutCompany.svelte";
   import ProfileGallery from "./shared/ProfileGallery.svelte";
+  import ProfileProducts from "./shared/ProfileProducts.svelte";
   import { defaultCompanyProfileData } from "./data";
   import type { CompanyProfileProps, ProfileNavItem } from "./types";
 
   let {
     data = defaultCompanyProfileData,
     isLoading = false,
-    yearFounded,
-    category,
-    address,
-    website,
     onEmail,
     onWhatsapp,
     onCopyLink,
@@ -47,8 +44,9 @@
 
   const sections: ProfileNavItem[] = [
     { id: "banner", label: "Apresentação" },
-    { id: "sobre-empresa", label: "Sobre a empresa" },
-    { id: "galeria-empresa", label: "Galeria da empresa" },
+    { id: "sobre-empresa", label: "Sobre" },
+    { id: "galeria-empresa", label: "Galeria" },
+    { id: "products-empresa", label: "Produtos" },
   ];
 
   let activeSection = $state(sections[0]?.id);
@@ -100,7 +98,7 @@
       />
     {/if}
 
-    <div class="flex min-w-0 flex-1 flex-col gap-6 md:px-5 md:pl-10 lg:pl-12">
+    <div class="flex min-w-0 flex-1 flex-col gap-6 md:px-5 md:pl-10 lg:pl-12 pb-5 md:pb-10">
       <div
         id="banner"
         bind:this={sectionEls["banner"]}
@@ -126,8 +124,6 @@
         <ProfileAboutCompany data={data.about} {isLoading} />
       </div>
 
-      <hr />
-
       <div
         id="galeria-empresa"
         bind:this={sectionEls["galeria-empresa"]}
@@ -135,6 +131,14 @@
       >
         <ProfileGallery data={data.gallery} {isLoading} />
       </div>
+
+      <div
+        id="products-empresa"
+        bind:this={sectionEls["products-empresa"]}
+        data-section-id="products-empresa"
+      >
+        <ProfileProducts data={data.products} {isLoading} />
+      </div>
     </div>
   </div>
 </div>

package/dist/components/pages/company-profile/data.js

@@ -65,4 +65,51 @@ export const defaultCompanyProfileData = {
             },
         ],
     },
+    products: {
+        title: "Produtos e Soluções",
+        description: "Conheça as principais soluções de embalagens e produtos industriais fabricados sob medida.",
+        variant: 1,
+        items: [
+            {
+                id: "prod-1",
+                title: "Caixas de Papelão Canelado",
+                content: "Embalagens resistentes de alta durabilidade para transporte industrial e exportação.",
+                price: "12.500 Kz",
+                imageUrl: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=600&auto=format&fit=crop",
+                buttonBuyText: "Solicitar Cotação",
+                onClickBuy: (id) => alert(`Solicitar produto ${id}`),
+                tags: [{ text: "Industrial" }, { text: "Canelado" }],
+            },
+            {
+                id: "prod-2",
+                title: "Bobinas de Papel Kraft",
+                content: "Bobinas industriais de papel kraft para empacotamento e proteção de mercadorias.",
+                price: "35.000 Kz",
+                imageUrl: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=600&auto=format&fit=crop",
+                buttonBuyText: "Solicitar Cotação",
+                onClickBuy: (id) => alert(`Solicitar produto ${id}`),
+                tags: [{ text: "Kraft" }, { text: "Sustentável" }],
+            },
+            {
+                id: "prod-3",
+                title: "Caixas para Setor Alimentar",
+                content: "Embalagens certificadas para conservação e distribuição de alimentos frescos e congelados.",
+                price: "18.000 Kz",
+                imageUrl: "https://images.unsplash.com/photo-1504917599217-d4dc5ebe6122?q=80&w=600&auto=format&fit=crop",
+                buttonBuyText: "Solicitar Cotação",
+                onClickBuy: (id) => alert(`Solicitar produto ${id}`),
+                tags: [{ text: "Alimentar" }, { text: "Certificado" }],
+            },
+            {
+                id: "prod-4",
+                title: "Embalagens Personalizadas",
+                content: "Impressão flexográfica personalizada em caixas de todos os formatos e medidas.",
+                price: "22.000 Kz",
+                imageUrl: "https://images.unsplash.com/photo-1587293852726-70cdb56c2866?q=80&w=600&auto=format&fit=crop",
+                buttonBuyText: "Solicitar Cotação",
+                onClickBuy: (id) => alert(`Solicitar produto ${id}`),
+                tags: [{ text: "Personalizado" }, { text: "Design" }],
+            },
+        ],
+    },
 };

package/dist/components/pages/company-profile/shared/ProfileBanner.svelte

@@ -18,6 +18,7 @@
   import ImgPlaceholder from "../../../../assets/placeholder-image.png";
   import type { ProfileBannerData, ProfileBannerTag } from "../types";
   import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { onDestroy } from "svelte";
   import {
     Calendar01FreeIcons,
     Copy,
@@ -29,6 +30,8 @@
     WhatsappIcon,
   } from "@hugeicons/core-free-icons";
 
+  const AUTOPLAY_MS = 8000;
+
   let {
     id,
     data,
@@ -50,6 +53,76 @@
   } = $props();
 
   const cover = $derived(data?.coverImages ?? []);
+  const isCover = $derived(cover.length > 0);
+  const hasMultipleCovers = $derived(cover.length > 1);
+
+  // ---- Carrossel de imagens de capa ----
+  let activeIndex = $state(0);
+  let intervalId: ReturnType<typeof setInterval> | undefined;
+
+  function stopAutoplay() {
+    if (intervalId) clearInterval(intervalId);
+  }
+
+  function startAutoplay() {
+    stopAutoplay();
+    if (hasMultipleCovers) {
+      intervalId = setInterval(() => {
+        activeIndex = (activeIndex + 1) % cover.length;
+      }, AUTOPLAY_MS);
+    }
+  }
+
+  function goTo(index: number) {
+    activeIndex = index;
+    startAutoplay(); // reinicia o timer ao clicar manualmente
+  }
+
+  // Reinicia apenas quando o conjunto de imagens muda (não a cada render)
+  $effect(() => {
+    void cover.length; // dependência explícita
+    activeIndex = 0;
+    startAutoplay();
+    return stopAutoplay;
+  });
+
+  onDestroy(stopAutoplay);
+
+  // Ações do header (topo direito) — evita repetir markup de botão
+  const headerActions = $derived([
+    { icon: Copy, label: "Copiar link", onclick: () => onCopyLink?.(id) },
+    { icon: Share, label: "Partilhar", onclick: () => onShare?.(id) },
+  ]);
+
+  const contactActions = $derived([
+    {
+      icon: Email,
+      label: "Email",
+      iconClass: "text-red-500",
+      onclick: () => onEmail?.(id),
+    },
+    {
+      icon: WhatsappIcon,
+      label: "Whatsapp",
+      iconClass: "text-green-500",
+      onclick: () => onWhatsapp?.(id),
+    },
+  ]);
+
+  const infoItems = $derived([
+    {
+      title: "Categoria",
+      description: data.category,
+      icon: DashboardBrowsingIcon,
+    },
+    { title: "Endereço", description: data.address, icon: MapPin },
+    {
+      title: "Anos de Atuação",
+      description: data.yearFounded,
+      icon: Calendar01FreeIcons,
+    },
+    { title: "Website", description: data.website, icon: Link01FreeIcons },
+  ]);
 </script>
 
 {#if isLoading}
@@ -68,33 +141,58 @@
   </div>
 {:else}
   <div
-    class="flex flex-col items-center justify-center bg-gradient p-2 relative rounded-lg"
+    class="flex flex-col items-center justify-center p-2 relative rounded-lg overflow-hidden
+    {isCover ? '' : 'bg-gradient'}"
   >
-    <!-- Capa -->
+    {#if isCover}
+      <div class="absolute inset-0 -z-10">
+        {#each cover as image, i (image.src)}
+          <img
+            src={image.src}
+            alt={image.alt ?? ""}
+            class="absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-in-out {i ===
+            activeIndex
+              ? 'opacity-100'
+              : 'opacity-0 pointer-events-none'}"
+          />
+        {/each}
+        <div class="absolute inset-0 bg-black/30"></div>
+
+        {#if hasMultipleCovers}
+          <div
+            class="absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 gap-1.5"
+          >
+            {#each cover as _, i (i)}
+              <button
+                type="button"
+                aria-label={`Ir para imagem ${i + 1}`}
+                onclick={() => goTo(i)}
+                class="h-1.5 rounded-full transition-all {i === activeIndex
+                  ? 'w-4 bg-white'
+                  : 'w-1.5 bg-white/50'}"
+              ></button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    {/if}
+
     <div class="overflow-hidden rounded-xl absolute top-0 right-0">
       <div class="flex gap-2 md:gap-5 p-4">
-        <Button
-          type="button"
-          variant="ghost"
-          class="rounded-full bg-white dark:bg-background"
-          aria-label="Copiar link"
-          onclick={() => onCopyLink?.(id)}
-        >
-          <HugeiconsIcon icon={Copy} />
-        </Button>
-        <Button
-          type="button"
-          variant="ghost"
-          class="rounded-full bg-white dark:bg-background"
-          aria-label="Partilhar"
-          onclick={() => onShare?.(id)}
-        >
-          <HugeiconsIcon icon={Share} />
-        </Button>
+        {#each headerActions as action (action.label)}
+          <Button
+            type="button"
+            variant="ghost"
+            class="rounded-full bg-white dark:bg-background"
+            aria-label={action.label}
+            onclick={action.onclick}
+          >
+            <HugeiconsIcon icon={action.icon} />
+          </Button>
+        {/each}
       </div>
     </div>
 
-    <!-- Logótipo + nome + contacto -->
     <div
       class="flex flex-col items-center gap-3 px-4 text-center justify-center md:-mb-10"
     >
@@ -103,7 +201,7 @@
           <img
             src={data.logo}
             alt={data.name}
-            class="rounded-full w-15 md:w-25 h-15 md:h-25 p-2"
+            class="rounded-full w-15 md:w-25 h-15 md:h-25 lg:w-40 lg:h-40 p-2"
             onerror={(e) =>
               ((e.target as HTMLImageElement).src = ImgPlaceholder)}
           />
@@ -117,27 +215,22 @@
         {data.name}
       </h1>
     </div>
+
     <div class="flex justify-between w-full p-5">
-      <Button
-        variant="ghost"
-        size="sm"
-        onclick={() => onEmail?.(id)}
-        class="bg-white cursor-pointer"
-      >
-        <HugeiconsIcon icon={Email} class="text-red-500" />
-        Email
-      </Button>
-      <Button
-        variant="ghost"
-        size="sm"
-        onclick={() => onWhatsapp?.(id)}
-        class="bg-white cursor-pointer"
-      >
-        <HugeiconsIcon icon={WhatsappIcon} class="text-green-500" />
-        Whatsapp
-      </Button>
+      {#each contactActions as action (action.label)}
+        <Button
+          variant="ghost"
+          size="sm"
+          onclick={action.onclick}
+          class="bg-white cursor-pointer"
+        >
+          <HugeiconsIcon icon={action.icon} class={action.iconClass} />
+          {action.label}
+        </Button>
+      {/each}
     </div>
   </div>
+
   <div
     class="bg-gray-50 dark:bg-background p-2 md:p-10 flex flex-col items-center justify-center"
   >
@@ -151,26 +244,9 @@
          *:w-full
          *:flex *:flex-col *:items-center"
     >
-      {@render companyInfo({
-        title: "Categoria",
-        description: data.category,
-        icon: DashboardBrowsingIcon,
-      })}
-      {@render companyInfo({
-        title: "Endereço",
-        description: data.address,
-        icon: MapPin,
-      })}
-      {@render companyInfo({
-        title: "Anos de Atuação",
-        description: data.yearFounded,
-        icon: Calendar01FreeIcons,
-      })}
-      {@render companyInfo({
-        title: "Website",
-        description: data.website,
-        icon: Link01FreeIcons,
-      })}
+      {#each infoItems as item (item.title)}
+        {@render companyInfo(item)}
+      {/each}
     </div>
   </div>
 {/if}

package/dist/components/pages/company-profile/shared/ProfileProducts.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" module>
+  /**
+   * Secção "Produtos": exibe a lista de produtos/serviços da empresa
+   * utilizando o componente CarouselGridProduct.
+   * Quando `isLoading` é true, exibe Skeletons.
+   * @component
+   * @example
+   * ```svelte
+   * <ProfileProducts data={data.products} />
+   * ```
+   */
+</script>
+
+<script lang="ts">
+  import CarouselGridProduct from "../../../core/carousel/grid/product/ui/CarouselGridProduct.svelte";
+  import type { ProfileProductsData } from "../types";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { PackageIcon } from "@hugeicons/core-free-icons";
+  import NotFoundEmpty from "../../../core/panel/NotFoundEmpty.svelte";
+
+  let {
+    data,
+    isLoading = false,
+    className = "",
+  }: {
+    data?: ProfileProductsData;
+    isLoading?: boolean;
+    className?: string;
+  } = $props();
+
+  const items = $derived(data?.items ?? []);
+  const loading = $derived(isLoading || Boolean(data?.isLoading));
+  const variant = $derived(data?.variant ?? data?.varient ?? 1);
+</script>
+
+<div class="bg-gray-50 dark:bg-background p-4 md:p-6 rounded-lg {className}">
+  <h2 class="mb-4 flex items-center gap-2 text-lg font-bold">
+    <HugeiconsIcon icon={PackageIcon} class="size-5" />
+    {data?.title ?? "Produtos"}
+  </h2>
+
+  {#if !loading && items.length === 0}
+    <NotFoundEmpty />
+  {:else}
+    <CarouselGridProduct
+      {items}
+      {variant}
+      isLoading={loading}
+      headerProps={{
+        title: "",
+        description: data?.description,
+        containerClass: "p-0 bg-transparent",
+      }}
+      slotProps={{
+        buttonPreviousAndNextClass:
+          "bg-white dark:bg-gray-800 shadow-md hover:bg-gray-100 dark:hover:bg-gray-700",
+        positionButtonPreviousAndNext: "center",
+      }}
+      gridClass="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
+    />
+  {/if}
+</div>

package/dist/components/pages/company-profile/shared/ProfileProducts.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ProfileProductsData } from "../types";
+type $$ComponentProps = {
+    data?: ProfileProductsData;
+    isLoading?: boolean;
+    className?: string;
+};
+declare const ProfileProducts: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProfileProducts = ReturnType<typeof ProfileProducts>;
+export default ProfileProducts;

package/dist/components/pages/company-profile/shared/ProfileSidebar.svelte

@@ -32,7 +32,7 @@
 
 <nav aria-label="Navegação do perfil" class="w-40 shrink-0 {className ?? ''}">
   <div
-    class="fixed flex flex-col gap-1 md:gap-2 bg-card p-6 md:p-8 h-screen border-r"
+    class="fixed flex flex-col gap-1 md:pt-10 lg:pt-20 md:gap-2 bg-card p-6 md:p-8 h-screen border-r"
   >
     {#if isLoading}
       {#each Array.from({ length: 4 }) as _, i (i)}