negodesign 0.0.35 → 0.0.37

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

@@ -0,0 +1,11 @@
+import type { ProfileNavItem } from "../types";
+type $$ComponentProps = {
+    items: ProfileNavItem[];
+    active?: string;
+    isLoading?: boolean;
+    onSelect?: (id: string) => void;
+    className?: string;
+};
+declare const ProfileSidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProfileSidebar = ReturnType<typeof ProfileSidebar>;
+export default ProfileSidebar;

package/dist/components/pages/company-profile/types.d.ts

@@ -0,0 +1,137 @@
+import type { IconSvgElement } from "@hugeicons/svelte";
+import type { CardProductProps } from "../../core/card/types";
+/**
+ * Item de estatística exibido na faixa de dados do banner
+ * (ex: "Setor de atuação", "Anos de Atuação", "Localização").
+ */
+export interface ProfileStatItem {
+    /** Rótulo da estatística (ex: "Setor de atuação"). */
+    label: string;
+    /** Valor exibido (ex: "Papel", "8", "Benguela"). */
+    value: string;
+}
+/**
+ * Imagem usada na galeria ou na capa do perfil.
+ */
+export interface ProfileImage {
+    /** Caminho ou URL completa da imagem (obrigatório). */
+    src: string;
+    /** Texto alternativo para acessibilidade. */
+    alt?: string;
+    type?: "image" | "video";
+}
+/**
+ * Item de navegação usado pela Sidebar e pelo menu de badges (mobile).
+ * O `id` deve corresponder ao `id` da secção (elemento âncora) na página.
+ */
+export interface ProfileNavItem {
+    /** Identificador único da secção (usado como âncora de scroll). */
+    id: string;
+    /** Rótulo visível do item de navegação. */
+    label: string;
+}
+/**
+ * Dados do banner/apresentação da empresa: capa, logótipo, nome,
+ * país, botão de contacto e faixa de estatísticas.
+ */
+export interface ProfileBannerData {
+    address?: string;
+    category?: string;
+    website?: string;
+    yearFounded?: string;
+    /** Imagem(ns) de capa exibidas no topo do banner. */
+    coverImages: ProfileImage[];
+    /** URL do logótipo da empresa. */
+    logo?: string;
+    /** Nome da empresa/fábrica. */
+    name: string;
+    /** Nome do país (ex: "Angola"). */
+    countryLabel?: string;
+    /** Emoji ou URL da bandeira do país. */
+    countryFlag?: string;
+    /** Texto do botão de contacto (padrão: "Contactar fábrica"). */
+    contactLabel?: string;
+    /** Estatísticas rápidas exibidas por baixo do nome (sector, anos, etc). */
+    stats?: ProfileStatItem[];
+}
+/**
+ * Dados da secção "Sobre a Empresa".
+ */
+export interface ProfileAboutData {
+    /** Imagem ilustrativa da empresa (ex: fachada, fábrica). */
+    image?: string;
+    /** Texto alternativo da imagem. */
+    imageAlt?: string;
+    /** Título da secção (padrão: "Sobre a Empresa"). */
+    title?: string;
+    /** Parágrafos de texto descritivo da empresa. */
+    paragraphs: string[];
+}
+/**
+ * Dados da secção "Galeria".
+ */
+export interface ProfileGalleryData {
+    /** Título da secção (padrão: "Galeria da {name}"). */
+    title?: string;
+    /** Lista de imagens/vídeos da galeria. */
+    images: ProfileImage[];
+}
+/**
+ * Dados da secção "Produtos".
+ */
+export interface ProfileProductsData {
+    /** Título da secção (padrão: "Produtos"). */
+    title?: string;
+    /** Descrição da secção de produtos. */
+    description?: string;
+    /** Lista de produtos/serviços da empresa. */
+    items: CardProductProps[];
+    /**
+     * Estado de carregamento.
+     * Quando true, todos os blocos exibem Skeletons no lugar do conteúdo.
+     * @default false
+     */
+    isLoading?: boolean;
+    /** Variante do CardProduct (1 ou 2). */
+    variant?: 1 | 2;
+    varient?: 1 | 2;
+}
+/**
+ * Dados completos apresentados na página de perfil da empresa/fábrica.
+ */
+export interface CompanyProfileData {
+    /** Identificador único do perfil. */
+    id: string | number;
+    /** Dados do banner (capa, nome, estatísticas). */
+    banner: ProfileBannerData;
+    /** Dados da secção "Sobre a Empresa". */
+    about: ProfileAboutData;
+    /** Dados da secção "Galeria". */
+    gallery: ProfileGalleryData;
+    /** Dados da secção "Produtos". */
+    products?: ProfileProductsData;
+}
+/**
+ * Propriedades do componente principal CompanyProfile.
+ */
+export interface CompanyProfileProps {
+    /** Dados completos do perfil a serem exibidos. */
+    data?: CompanyProfileData;
+    /**
+     * Estado de carregamento.
+     * Quando true, todos os blocos exibem Skeletons no lugar do conteúdo.
+     * @default false
+     */
+    isLoading?: boolean;
+    onWhatsapp?: (id: string | number) => void;
+    onEmail?: (id: string | number) => void;
+    /** Callback executado quando o utilizador clica em copiar link. */
+    onCopyLink?: (id: string | number) => void;
+    /** Callback executado quando o utilizador clica em partilhar. */
+    onShare?: (id: string | number) => void;
+}
+export interface ProfileBannerTag {
+    label: string;
+    value: string;
+    icon?: string | IconSvgElement;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/components/pages/privacy-policy-or-terms-of-use/data.d.ts

@@ -0,0 +1,3 @@
+import type { DocPageData } from "./types";
+export declare const privacyPolicyData: DocPageData;
+export default privacyPolicyData;

package/dist/components/pages/privacy-policy-or-terms-of-use/data.js

@@ -0,0 +1,179 @@
+export const privacyPolicyData = {
+    title: "Política de Privacidade e Termos de Uso",
+    lastUpdated: "15 de Agosto de 2026",
+    breadcrumb: [
+        { label: "Início", href: "/" },
+        { label: "Institucional", href: "#" },
+        { label: "Termos & Privacidade" },
+    ],
+    sections: [
+        {
+            id: "introducao",
+            number: "1",
+            title: "Introdução",
+            level: 1,
+            blocks: [
+                {
+                    type: "paragraph",
+                    text: "Bem-vindo à plataforma Negoturismo. A sua privacidade e a transparência nas relações com os nossos utilizadores, parceiros e clientes são valores fundamentais para a nossa organização.",
+                },
+                {
+                    type: "paragraph",
+                    text: "Este documento estabelece as diretrizes de utilização da plataforma digital Negoturismo, bem como as políticas de recolha, tratamento e proteção dos dados pessoais fornecidos durante o acesso aos nossos serviços turísticos, reservas de hotelaria, voos e contratação de guias e tradutores.",
+                },
+            ],
+            subsections: [
+                {
+                    id: "aceitacao-termos",
+                    number: "1.1",
+                    title: "Aceitação dos Termos",
+                    level: 2,
+                    blocks: [
+                        {
+                            type: "paragraph",
+                            text: "Ao aceder, navegar ou utilizar qualquer funcionalidade do portal Negoturismo, o utilizador declara expressamente que leu, compreendeu e concorda com todas as disposições aqui estipuladas.",
+                        },
+                        {
+                            type: "list",
+                            items: [
+                                "Utilizadores registados têm acesso a funcionalidades exclusivas de gestão de reservas.",
+                                "Parceiros comerciais e fornecedores de serviços sujeitam-se ainda aos contratos específicos de afiliação.",
+                                "O uso continuado da plataforma após eventuais alterações implica aceitação tácita das novas condições.",
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            id: "recolha-dados",
+            number: "2",
+            title: "Recolha e Tratamento de Dados Pessoais",
+            level: 1,
+            blocks: [
+                {
+                    type: "paragraph",
+                    text: "Para garantir a prestação eficaz dos nossos serviços e proporcionar uma experiência personalizada, recolhemos dados necessários para processamento de pagamentos, validação de identidade e emissão de vouchers de viagem.",
+                },
+            ],
+            subsections: [
+                {
+                    id: "dados-fornecidos",
+                    number: "2.1",
+                    title: "Dados Fornecidos Diretamente",
+                    level: 2,
+                    blocks: [
+                        {
+                            type: "list",
+                            items: [
+                                "Nome completo, número de identificação civil ou passaporte.",
+                                "Endereço de correio eletrónico, número de telefone e morada de faturação.",
+                                "Informações de pagamento (processadas de forma encriptada através de gateways certificados).",
+                                "Preferências de viagem, itinerários e histórico de reservas efetuadas.",
+                            ],
+                        },
+                    ],
+                },
+                {
+                    id: "finalidade-tratamento",
+                    number: "2.2",
+                    title: "Finalidades do Tratamento",
+                    level: 2,
+                    blocks: [
+                        {
+                            type: "paragraph",
+                            text: "Os dados recolhidos destinam-se exclusivamente às seguintes finalidades legítimas:",
+                        },
+                        {
+                            type: "list",
+                            items: [
+                                "Processamento e confirmação de reservas junto a companhias aéreas, hotéis e parceiros locais.",
+                                "Comunicação com o cliente sobre alterações de voos, confirmações e avisos de suporte ao cliente.",
+                                "Prevenção contra fraudes e garantia da segurança operacional da plataforma.",
+                                "Envio de ofertas e recomendações personalizadas quando previamente autorizado pelo utilizador.",
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            id: "reservas-pagamentos",
+            number: "3",
+            title: "Reservas, Preços e Pagamentos",
+            level: 1,
+            blocks: [
+                {
+                    type: "paragraph",
+                    text: "Todas as transações financeiras efetuadas na plataforma são expressas na moeda indicada no momento da compra (Kwanza - AOA ou moeda estrangeira correspondente) e incluem todas as taxas aplicáveis por lei.",
+                },
+                {
+                    type: "list",
+                    items: [
+                        "A confirmação da reserva está sujeita à validação do pagamento pela instituição financeira emissora.",
+                        "Preços e disponibilidades de quartos e voos são dinâmicos e sujeitos a alteração até à finalização da compra.",
+                        "O cliente é responsável pela verificação da exatidão dos dados antes da confirmação do pagamento.",
+                    ],
+                },
+            ],
+        },
+        {
+            id: "cancelamentos-reembolsos",
+            number: "4",
+            title: "Cancelamentos e Reembolsos",
+            level: 1,
+            blocks: [
+                {
+                    type: "paragraph",
+                    text: "As condições de cancelamento, alteração de datas e direito a reembolso variam de acordo com as políticas individuais de cada fornecedor de serviços (hotel, companhia aérea, operadora de turismo).",
+                },
+                {
+                    type: "list",
+                    items: [
+                        "Tarifas não-reembolsáveis não conferem direito à devolução dos valores pagos em caso de desistência.",
+                        "Pedidos de cancelamento dentro do prazo legal são processados num prazo estimado de 5 a 15 dias úteis.",
+                        "Eventuais taxas administrativas de intermediação poderão ser deduzidas do montante a reembolsar conforme o regulamento da tarifa.",
+                    ],
+                },
+            ],
+        },
+        {
+            id: "seguranca-cookies",
+            number: "5",
+            title: "Segurança da Informação e Cookies",
+            level: 1,
+            blocks: [
+                {
+                    type: "paragraph",
+                    text: "Implementamos protocolos de segurança modernos, incluindo encriptação TLS/SSL e padrões de controlo de acesso rigorosos para proteger os seus dados contra acessos não autorizados, perda ou destruição.",
+                },
+                {
+                    type: "paragraph",
+                    text: "Utilizamos cookies de sessão e analíticos para melhorar a navegação, memorizar preferências e compreender como os nossos serviços são utilizados pelos visitantes.",
+                },
+            ],
+        },
+        {
+            id: "contacto-suporte",
+            number: "6",
+            title: "Contactos e Apoio ao Cliente",
+            level: 1,
+            blocks: [
+                {
+                    type: "paragraph",
+                    text: "Caso tenha qualquer dúvida sobre esta Política de Privacidade ou pretenda exercer os seus direitos de acesso, retificação ou eliminação de dados, contacte a nossa equipa de encarregados de proteção de dados:",
+                },
+                {
+                    type: "list",
+                    items: [
+                        "E-mail: privacidade@negoturismo.ao",
+                        "Suporte Geral: suporte@negoturismo.ao",
+                        "Telefone: +244 923 000 000 / +244 945 000 000",
+                        "Endereço: Luanda, Angola",
+                    ],
+                },
+            ],
+        },
+    ],
+};
+export default privacyPolicyData;

package/dist/components/pages/privacy-policy-or-terms-of-use/shared/DocSectionView.svelte

@@ -12,6 +12,7 @@
 <script lang="ts">
   import type { DocSection } from "../types";
   import ContentBlockView from "./ContentBlockView.svelte";
+  import DocSectionView from "./DocSectionView.svelte";
 
   let { section }: { section: DocSection } = $props();
 
@@ -37,7 +38,7 @@
   {#if section.subsections}
     <div class="flex flex-col gap-6 mt-2">
       {#each section.subsections as subsection (subsection.id)}
-        <svelte:self section={subsection} />
+        <DocSectionView section={subsection} />
       {/each}
     </div>
   {/if}

package/dist/components/pages/privacy-policy-or-terms-of-use/shared/DocSectionView.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { DocSection } from "../types";
+import DocSectionView from "./DocSectionView.svelte";
 type $$ComponentProps = {
     section: DocSection;
 };

package/dist/components/pages/product-details/01/ProductDetails01.svelte

@@ -17,6 +17,7 @@
   import ProductDetailHeader from "../shared/ProductDetailHeader.svelte";
   import ProductDetailImage from "../shared/ProductDetailImage.svelte";
   import ProductDetailMap from "../shared/ProductDetailMap.svelte";
+  import ProductDetailReviews from "../shared/ProductDetailReviews.svelte";
   import ProductDetailTags from "../shared/ProductDetailTags.svelte";
   import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
   import type { ProductDetailsData } from "../types";
@@ -42,10 +43,14 @@
   </div>
 
   <div class="grid gap-10 lg:grid-cols-2">
-    <ProductDetailImage images={data.gallery} {isLoading} />
+    <ProductDetailImage files={data.gallery} {isLoading} />
 
     <div class="flex flex-col gap-5">
-      <ProductDetailHeader title={data.title} subtitle={data.subtitle} {isLoading} />
+      <ProductDetailHeader
+        title={data.title}
+        subtitle={data.subtitle}
+        {isLoading}
+      />
 
       <ProductDetailTags tags={data.tags} {isLoading} />
 
@@ -63,9 +68,16 @@
     </div>
   </div>
 
-  {#if data.location}
-    <div class="mt-12">
-      <ProductDetailMap location={data.location} {isLoading} />
-    </div>
-  {/if}
+  <div class="grid gap-10 grid-cols-1 md:grid-cols-2 mt-5 md:mt-10">
+    {#if data.reviews}
+      <div>
+        <ProductDetailReviews reviews={data.reviews} {isLoading} />
+      </div>
+    {/if}
+    {#if data.location}
+      <div>
+        <ProductDetailMap location={data.location} {isLoading} />
+      </div>
+    {/if}
+  </div>
 </div>

package/dist/components/pages/product-details/02/ProductDetails02.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" module>
   /**
-   * Variante 02 da página de detalhes do produto.
-   * Layout com galeria em destaque e conteúdo em coluna centralizada.
+   * Variante 03 da página de detalhes do produto.
+   * Layout com galeria, conteúdo expandido e painel de compra sticky.
    * @component
    * @example
    * ```svelte
-   * <ProductDetails02 {data} {onBuy} {onFavorite} {onCart} />
+   * <ProductDetails03 {data} {onBuy} {onFavorite} {onCart} />
    * ```
    */
 </script>
@@ -17,6 +17,7 @@
   import ProductDetailFilesVertical from "../shared/ProductDetailFilesVertical.svelte";
   import ProductDetailHeader from "../shared/ProductDetailHeader.svelte";
   import ProductDetailMap from "../shared/ProductDetailMap.svelte";
+  import ProductDetailReviews from "../shared/ProductDetailReviews.svelte";
   import ProductDetailTags from "../shared/ProductDetailTags.svelte";
   import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
   import type { ProductDetailsData } from "../types";
@@ -36,52 +37,56 @@
   } = $props();
 </script>
 
-<div class="bg-background">
-  <ProductDetailFilesVertical
-    images={data.gallery}
-    className="mx-auto max-w-5xl px-6 pt-10"
-    {isLoading}
-  />
+<div class="mx-auto max-w-7xl px-6 py-10">
+  <div class="mb-8">
+    <ProductDetailBreadcrumb items={data.breadcrumb} {isLoading} />
+  </div>
 
-  <div class="mx-auto max-w-3xl px-6 py-12">
-    <div class="flex flex-col gap-6">
-      <div class="flex justify-center">
-        <ProductDetailBreadcrumb items={data.breadcrumb} {isLoading} />
-      </div>
+  <div class="grid gap-10 lg:grid-cols-[1fr_26rem]">
+    <div class="flex flex-col gap-8">
+      <ProductDetailFilesVertical files={data.gallery} {isLoading} />
 
-      <ProductDetailHeader
-        title={data.title}
-        subtitle={data.subtitle}
-        className="items-center text-center"
-        {isLoading}
-      />
+      <div class="flex flex-col gap-5">
+        <ProductDetailHeader
+          title={data.title}
+          subtitle={data.subtitle}
+          {isLoading}
+        />
 
-      <div class="flex justify-center">
         <ProductDetailTags tags={data.tags} {isLoading} />
-      </div>
 
-      <ProductDetailDescription
-        description={data.description}
-        longDescription={data.longDescription}
-        {isLoading}
-      />
+        <ProductDetailDescription
+          description={data.description}
+          longDescription={data.longDescription}
+          {isLoading}
+        />
 
-      {#if data.features}
-        <div class="mx-auto w-full max-w-md">
+        {#if data.features}
           <ProductDetailFeatures features={data.features} {isLoading} />
-        </div>
-      {/if}
-
-      <div class="flex justify-center">
-        <div class="w-full max-w-sm">
-          <ProductPurchasePanel {data} {isLoading} {onBuy} {onFavorite} {onCart} />
-        </div>
+        {/if}
       </div>
     </div>
+
+    <aside class="lg:sticky lg:top-8 lg:self-start">
+      <div class="rounded-lg border p-6">
+        <ProductPurchasePanel
+          {data}
+          {isLoading}
+          {onBuy}
+          {onFavorite}
+          {onCart}
+        />
+      </div>
+      {#if data.reviews}
+        <div class="mt-5 md:mt-10">
+          <ProductDetailReviews reviews={data.reviews} {isLoading} />
+        </div>
+      {/if}
+    </aside>
   </div>
 
   {#if data.location}
-    <div class="mx-auto max-w-3xl px-6 pb-12">
+    <div class="mt-12">
       <ProductDetailMap location={data.location} {isLoading} />
     </div>
   {/if}

package/dist/components/pages/product-details/03/ProductDetails03.svelte

@@ -1,25 +1,26 @@
 <script lang="ts" module>
   /**
-   * Variante 03 da página de detalhes do produto.
-   * Layout com galeria, conteúdo expandido e painel de compra sticky.
+   * Variante 04 da página de detalhes do produto.
+   * Layout com galeria, informações e abas de conteúdo (descrição,
+   * avaliações) abaixo dos dados principais.
    * @component
    * @example
    * ```svelte
-   * <ProductDetails03 {data} {onBuy} {onFavorite} {onCart} />
+   * <ProductDetails04 {data} {onBuy} {onFavorite} {onCart} />
    * ```
    */
 </script>
 
 <script lang="ts">
   import ProductDetailBreadcrumb from "../shared/ProductDetailBreadcrumb.svelte";
-  import ProductDetailDescription from "../shared/ProductDetailDescription.svelte";
-  import ProductDetailFeatures from "../shared/ProductDetailFeatures.svelte";
-  import ProductDetailFilesVertical from "../shared/ProductDetailFilesVertical.svelte";
   import ProductDetailHeader from "../shared/ProductDetailHeader.svelte";
+  import ProductDetailImage from "../shared/ProductDetailImage.svelte";
   import ProductDetailMap from "../shared/ProductDetailMap.svelte";
   import ProductDetailTags from "../shared/ProductDetailTags.svelte";
+  import ProductDetailTabs from "../shared/ProductDetailTabs.svelte";
   import ProductPurchasePanel from "../shared/ProductPurchasePanel.svelte";
   import type { ProductDetailsData } from "../types";
+  import { useDevice } from "../../../../hooks/responsive.svelte";
 
   let {
     data,
@@ -34,6 +35,7 @@
     onFavorite?: (id: string | number) => void;
     onCart?: (id: string | number) => void;
   } = $props();
+  const responsive = useDevice();
 </script>
 
 <div class="mx-auto max-w-7xl px-6 py-10">
@@ -41,37 +43,39 @@
     <ProductDetailBreadcrumb items={data.breadcrumb} {isLoading} />
   </div>
 
-  <div class="grid gap-10 lg:grid-cols-[1fr_22rem]">
-    <div class="flex flex-col gap-8">
-      <ProductDetailFilesVertical images={data.gallery} {isLoading} />
+  <div class="grid gap-10 lg:grid-cols-2">
+    <ProductDetailImage files={data.gallery} {isLoading} />
 
-      <div class="flex flex-col gap-5">
-        <ProductDetailHeader title={data.title} subtitle={data.subtitle} {isLoading} />
+    <div class="flex flex-col gap-5">
+      <ProductDetailHeader
+        title={data.title}
+        subtitle={data.subtitle}
+        {isLoading}
+      />
 
-        <ProductDetailTags tags={data.tags} {isLoading} />
+      <ProductDetailTags tags={data.tags} {isLoading} />
 
-        <ProductDetailDescription
-          description={data.description}
-          longDescription={data.longDescription}
-          {isLoading}
-        />
+      <ProductPurchasePanel {data} {isLoading} {onBuy} {onFavorite} {onCart} />
 
-        {#if data.features}
-          <ProductDetailFeatures features={data.features} {isLoading} />
+      {#if !responsive.isMobile}
+        {#if data.location}
+          <div class="mt-5">
+            <ProductDetailMap location={data.location} {isLoading} />
+          </div>
         {/if}
-      </div>
+      {/if}
     </div>
+  </div>
 
-    <aside class="lg:sticky lg:top-8 lg:self-start">
-      <div class="rounded-lg border p-6">
-        <ProductPurchasePanel {data} {isLoading} {onBuy} {onFavorite} {onCart} />
-      </div>
-    </aside>
+  <div class="mt-12 border-t pt-8">
+    <ProductDetailTabs tabs={data.tabs} {data} {isLoading} />
   </div>
 
-  {#if data.location}
-    <div class="mt-12">
-      <ProductDetailMap location={data.location} {isLoading} />
-    </div>
+  {#if responsive.isMobile}
+    {#if data.location}
+      <div class="mt-12">
+        <ProductDetailMap location={data.location} {isLoading} />
+      </div>
+    {/if}
   {/if}
 </div>

package/dist/components/pages/product-details/ProductDetails.svelte

@@ -20,18 +20,22 @@
 <script lang="ts">
   import type { ProductDetailsProps } from "./types";
   import ProductDetails01 from "./01/ProductDetails01.svelte";
-  import ProductDetails02 from "./02/ProductDetails02.svelte";
-  import ProductDetails03 from "./03/ProductDetails03.svelte";
-  import ProductDetails04 from "./04/ProductDetails04.svelte";
+  import ProductDetails03 from "./02/ProductDetails02.svelte";
+  import ProductDetails04 from "./03/ProductDetails03.svelte";
 
-  let { varient = 1, data, isLoading = false, onBuy, onFavorite, onCart }: ProductDetailsProps = $props();
+  let {
+    varient = 1,
+    data,
+    isLoading = false,
+    onBuy,
+    onFavorite,
+    onCart,
+  }: ProductDetailsProps = $props();
 </script>
 
 {#if varient === 2}
-  <ProductDetails02 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
-{:else if varient === 3}
   <ProductDetails03 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
-{:else if varient === 4}
+{:else if varient === 3}
   <ProductDetails04 {data} {isLoading} {onBuy} {onFavorite} {onCart} />
 {:else}
   <ProductDetails01 {data} {isLoading} {onBuy} {onFavorite} {onCart} />