spoko-design-system 1.0.0 → 1.1.0

package/src/components/Header/Header.astro

@@ -69,32 +69,32 @@ import Search from "astro-pagefind/components/Search";
   @apply font-textlight text-base;
 }
 
-.pagefind-ui__search-input {
-  height: 40px !important;
+.pagefind-ui .pagefind-ui__search-input {
+  height: 40px;
   border: 0;
-  @apply rounded-none sm:rounded-3xl h-10 w-full;
+  @apply rounded-none sm:rounded-3xl w-full;
 }
 
-.pagefind-ui__result-excerpt,
-.pagefind-ui__button {
-  font-size: 14px !important;
+.pagefind-ui .pagefind-ui__result-excerpt,
+.pagefind-ui .pagefind-ui__button {
+  font-size: 14px;
 }
 
-.pagefind-ui__filter-name {
-  font-size: 12px !important;
+.pagefind-ui .pagefind-ui__filter-name {
+  font-size: 12px;
 }
 
-.pagefind-ui__drawer:not(.pagefind-ui__hidden) {
+.pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
   @apply p-4;
 }
 
-.pagefind-ui__result-link {
+.pagefind-ui .pagefind-ui__result-link {
   color: var(--pagefind-ui-primary);
   font-family: vw_headlight;
   font-size: 1rem;
 }
 
-.pagefind-ui__result-link::before {
+.pagefind-ui .pagefind-ui__result-link::before {
   top: 0;
   bottom: 0;
   left: 0;
@@ -103,107 +103,107 @@ import Search from "astro-pagefind/components/Search";
   position: absolute;
 }
 
-.pagefind-ui__result-excerpt {
+.pagefind-ui .pagefind-ui__result-excerpt {
   color: var(--pagefind-ui-text);
   order: 3;
 }
 
-.pagefind-ui__drawer {
+.pagefind-ui .pagefind-ui__drawer {
   @apply bg-white md:fixed shadow-lg rounded-b-lg border-t border-t-transparent overflow-auto top-17 md:max-w-[calc(100vw-10%)] max-h-[calc(100vh-10%)] gap-[30px];
 }
 
-.pagefind-ui__search-clear {
+.pagefind-ui .pagefind-ui__search-clear {
   height: 38px;
   top: 0;
   @apply sm:rounded-3xl;
 }
 
-.pagefind-ui__search-input {
+.pagefind-ui .pagefind-ui__search-input {
   font-size: 1rem;
   font-weight: 400;
   padding: 0 2.5rem 2px;
 }
 
-.pagefind-ui__form::before {
+.pagefind-ui .pagefind-ui__form::before {
   top: 14px;
   left: 16px;
   width: 14px;
   height: 14px;
 }
 
-.pagefind-ui__result {
+.pagefind-ui .pagefind-ui__result {
   padding: 0.875rem 0;
   gap: 1rem;
   @apply relative;
 }
 
-.pagefind-ui__filter-block {
+.pagefind-ui .pagefind-ui__filter-block {
   padding: 0.875rem 0;
   border-width: 1px;
 }
 
-.pagefind-ui__filter-group {
+.pagefind-ui .pagefind-ui__filter-group {
   gap: 0.5rem;
   padding-top: 0.875rem;
 }
 
-.pagefind-ui__filter-value {
+.pagefind-ui .pagefind-ui__filter-value {
   gap: 10px;
 }
 
-.pagefind-ui__filter-checkbox {
+.pagefind-ui .pagefind-ui__filter-checkbox {
   border-radius: 3px;
   margin-top: 1px;
   min-width: calc(16px * var(--pagefind-ui-scale));
 }
 
-.pagefind-ui__result-image {
+.pagefind-ui .pagefind-ui__result-image {
   @apply drop-shadow-sm w-full h-full object-contain rounded-none;
 }
 
-.pagefind-ui__filter-panel {
+.pagefind-ui .pagefind-ui__filter-panel {
   @apply hidden;
 }
 
-.pagefind-ui__filter-label {
+.pagefind-ui .pagefind-ui__filter-label {
   font-size: 0.9rem;
 }
 
-.pagefind-ui__button {
+.pagefind-ui .pagefind-ui__button {
   font-weight: 400;
   height: 40px;
 }
 
-.pagefind-ui__result-tag {
+.pagefind-ui .pagefind-ui__result-tag {
   background: inherit;
   padding: 0;
   color: #9ca3af;
 }
 
-.pagefind-ui__result-thumb {
+.pagefind-ui .pagefind-ui__result-thumb {
   max-width: 120px;
 }
 
-.pagefind-ui__result-tags {
+.pagefind-ui .pagefind-ui__result-tags {
   margin-top: 0.4rem;
   order: 2;
 }
 
-.pagefind-ui__filter-name::after {
+.pagefind-ui .pagefind-ui__filter-name::after {
   color: var(--pagefind-ui-primary);
 }
 
-.pagefind-ui__result-title {
+.pagefind-ui .pagefind-ui__result-title {
   font-size: inherit;
   line-height: 1;
 }
 
-.pagefind-ui__filter-panel,
-.pagefind-ui__results-area {
+.pagefind-ui .pagefind-ui__filter-panel,
+.pagefind-ui .pagefind-ui__results-area {
   margin-top: 0;
 }
 
-.pagefind-ui__message {
+.pagefind-ui .pagefind-ui__message {
   padding: 0.875rem 0;
 }
 

package/src/components/Headline.vue

@@ -23,7 +23,7 @@ const props = defineProps({
     default: 'regular'
   },
   underline: {
-    type: Boolean,
+    type: [Boolean, String] as PropType<boolean | 'center'>,
     required: false,
     default: false
   }
@@ -61,8 +61,8 @@ const typographyClass = getTypographyClass()
 </script>
 
 <template>
-  <component :is="props.as" class="mb-2.5 flex sm:block md:flex items-center leading-none"
-    :class="`${typographyClass} ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline ? 'headline--underline' : ''}`">
+  <component :is="props.as" class="mb-2.5 leading-none"
+    :class="`${typographyClass} ${props.textSize ? `text-${props.textSize}` : 'text-xl'} ${props.underline === true ? 'headline--underline' : ''} ${props.underline === 'center' ? 'headline--underline-center block text-center' : 'flex sm:block md:flex items-center'}`">
     <slot />
   </component>
 </template>
@@ -82,7 +82,27 @@ const typographyClass = getTypographyClass()
     @apply content-empty absolute left-0 bottom-px h-px;
     width: 95%;
     max-width: 255px;
-    background-color: #64748b
+    background-color: #64748b;
+  }
+}
+
+.headline--underline-center {
+  @apply relative pb-4;
+
+  &:before {
+    @apply content-empty absolute left-1/2 bottom-px h-px;
+    width: 95%;
+    max-width: 255px;
+    background-color: #64748b;
+    transform: translateX(-50%);
+  }
+
+  &:after {
+    @apply content-empty absolute bottom-0;
+    height: 3px;
+    width: 55px;
+    background-color: var(--clr-primary-400);
+    left: calc(50% - min(47.5%, 127.5px));
   }
 }
 </style>

package/src/components/Product/ProductLink.astro

@@ -27,7 +27,6 @@ import { getProductUrl } from "@utils/product/getProductUrl";
 import { getShopProductUrl } from "@utils/product/getShopProductUrl";
 import { getProductTranslation } from "@utils/product/getProductTranslation";
 import { getImageUrl } from '@utils/getImageUrl';
-import i18next, { t } from "i18next";
 import { ProductImage, ProductNumber, removeSemicolon, getPriceFormatted } from "spoko-design-system";
 
 // Użycie productObject jeśli przekazane, inaczej pobranie produktu na podstawie productId
@@ -40,18 +39,14 @@ const thumb = product ? (
     : await getImageUrl(product.photo || "", `'ProductLink' ${product.number}`)
 ) : "";
 
-// Tłumaczenie nazwy produktu jeśli dostępne
-const productTranslation = i18next.exists(`parts.${product?.number}.name`)
-  ? null
-  : productId ? await getProductTranslation(productId, product?.number || "") : null;
+// Product translation removed - using English only
+const productTranslation = productId ? await getProductTranslation(productId, product?.number || "") : null;
  
-// const productName = product ? (
-//   isShopProduct
-//     ? (locale === "pl" ? product.name_pl : product.name_en)
-//     : productTranslation?.name || t(`parts.${product.number}.name`)
-// ) : "";
-
-const productName = product.name || 'NO NAME';
+const productName = product ? (
+  isShopProduct
+    ? product.name_en || product.name
+    : productTranslation?.name || product.name
+) : 'NO NAME';
 
 const nameFormatted = removeSemicolon(productName.toString());
 ---

package/src/components/ProductTile.astro

@@ -2,7 +2,6 @@
 const { productObject, locale, index } = Astro.props;
 import Image from "./Image.astro"
 import ProductNumber from "./Product/ProductNumber.astro"
-import { t } from "i18next";
 ---
 
 { productObject && 
@@ -36,7 +35,7 @@ import { t } from "i18next";
         { productObject.name }
       </a>
 
-      <ProductNumber productNumber={productObject.number} copyDisabled={false} buttonTexts={{ copy: t('copy'), copied: t('copied') }}  />
+      <ProductNumber productNumber={productObject.number} copyDisabled={false} buttonTexts={{ copy: 'Copy', copied: 'Copied' }}  />
       
       { index !== null && 
         ( <meta itemprop="position" content={String(index)} />

package/src/layouts/Layout.astro

@@ -3,11 +3,8 @@ import HeadCommon from "./partials/HeadCommon.astro";
 import FooterCommon from "./partials/FooterCommon.astro";
 import HeadSEO from "../layouts/partials/HeadSEO.astro";
 import * as CONFIG from "../config";
-import { t, changeLanguage } from "i18next";
 import "../styles/main.css";
 import Copyright from "../components/Copyright.astro";
-const locale = "en";
-changeLanguage(locale);
 const { content = {} } = Astro.props;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
 ---

package/src/layouts/MainLayout.astro

@@ -5,11 +5,8 @@ import Header from "../components/Header/Header.astro";
 import PageContent from "../components/PageContent.astro";
 import LeftSidebar from "../components/LeftSidebar.astro";
 import * as CONFIG from "../config";
-import { t, changeLanguage } from "i18next";
 import "../styles/main.css";
 import Copyright from "../components/Copyright.astro";
-const locale = "en";
-changeLanguage(locale);
 const { content = {} } = Astro.props;
 const currentPage = Astro.url.pathname;
 const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();

package/src/pages/components/buttons.mdx

@@ -5,7 +5,6 @@ layout: "../../layouts/MainLayout.astro"
 import Button from '../../components/Button.vue'
 import ButtonCopy from '../../components/ButtonCopy.astro'
 import { Icon } from 'astro-icon/components';
-import { t } from "i18next";
 
 # All buttons
 

package/src/pages/components/hand-drive.mdx

@@ -68,33 +68,6 @@ import HandDrive from 'spoko-design-system/src/components/HandDrive.astro'
 />
 ```
 
-## API Integration
-
-The component is designed to work seamlessly with API data:
-
-```js
-// API Response Format
-{
-  "hand_drive": 1,                    // Original number (legacy)
-  "hand_drive_type": "lhd",          // Clean string value
-  "hand_drive_text": "Left-Hand Drive" // Translated text
-}
-
-// Component Usage
-<HandDrive
-  handDrive={partData.hand_drive_type}
-  text={partData.hand_drive_text}
-/>
-```
-
-### API Call Example
-```js
-const response = await fetch('/api/parts/6R106150282V?locale=en&with_translations=1');
-const partData = await response.json();
-
-// partData.hand_drive_type = "lhd"
-// partData.hand_drive_text = "Left-Hand Drive"
-```
 
 ## Design Principles
 

package/src/pages/index.astro

@@ -1,5 +1,4 @@
 ---
-import { changeLanguage } from "i18next";
 import { Icon } from "astro-icon/components";
 import { SITE } from "../config";
 import Jumbotron from "../components/Jumbotron.astro";
@@ -14,19 +13,19 @@ const navItems = [
     title: "Core",
     description: "Base colors, typography, shadows etc.",
     url: "/core/introduction",
-    icon: "ant-design:cluster-outlined",
+    icon: "streamline-freehand-color:database",
   },
   {
     title: "Components",
     description: "The building blocks for our UI.",
     url: "/components/buttons",
-    icon: "ant-design:build-twotone",
+    icon: "streamline-freehand-color:module-building-blocks",
   },
   {
     title: "Patterns",
     description: "Common patterns for building interfaces.",
     url: "/patterns/introduction",
-    icon: "ant-design:audit-outlined",
+    icon: "streamline-freehand-color:layouts-array-1",
   },
 ];
 ---
@@ -75,6 +74,69 @@ const navItems = [
         }
       </div>
     </nav>
+
+    <!-- Features Section -->
+    <section class="py-16 px-4 max-w-5xl mx-auto">
+      <div class="text-center mb-12">
+        <Headline as="h2" textSize="3xl" underline="center" class="text-gray-900 mb-6">
+          Why Spoko Design System?
+        </Headline>
+        <p class="text-lg text-gray-600 max-w-2xl mx-auto">
+          A modern, comprehensive design system built with Astro and Vue, featuring consistent components and patterns for rapid development.
+        </p>
+      </div>
+
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div class="text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100">
+          <Headline as="h3" textSize="xl" underline={false} class="mb-3 text-gray-900 flex items-center justify-center">
+            <Icon name="simple-icons:astro" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+            Astro-Powered
+          </Headline>
+          <p class="text-gray-600">Built with <a href="https://astro.build/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 underline transition-colors">Astro</a> for lightning-fast performance and seamless integration with modern frameworks.</p>
+        </div>
+
+        <div class="text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100">
+          <Headline as="h3" textSize="xl" underline={false} class="mb-3 text-gray-900 flex items-center justify-center">
+            <Icon name="streamline-freehand-color:data-transfer-document-module" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+            Rich Components
+          </Headline>
+          <p class="text-gray-600">20+ production-ready components including buttons, modals, carousels, and specialized automotive elements.</p>
+        </div>
+
+        <div class="text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100">
+          <Headline as="h3" textSize="xl" underline={false} class="mb-3 text-gray-900 flex items-center justify-center">
+            <Icon name="vscode-icons:file-type-unocss" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+            UnoCSS Styling
+          </Headline>
+          <p class="text-gray-600">Atomic CSS approach with <a href="https://unocss.dev/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 underline transition-colors">UnoCSS</a> for flexible, maintainable styling and consistent design tokens.</p>
+        </div>
+
+        <div class="text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100">
+          <Headline as="h3" textSize="xl" underline={false} class="mb-3 text-gray-900 flex items-center justify-center">
+            <Icon name="vscode-icons:file-type-vue" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+            Vue Integration
+          </Headline>
+          <p class="text-gray-600">Seamless <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 underline transition-colors">Vue 3</a> component integration with TypeScript support for interactive elements.</p>
+        </div>
+
+        <div class="text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100">
+          <Headline as="h3" textSize="xl" underline={false} class="mb-3 text-gray-900 flex items-center justify-center">
+            <Icon name="streamline-freehand-color:design-process-drawing-board" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+            Design Patterns
+          </Headline>
+          <p class="text-gray-600">Proven patterns and layouts for common use cases, from landing pages to product catalogs.</p>
+        </div>
+
+        <div class="text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100">
+          <Headline as="h3" textSize="xl" underline={false} class="mb-3 text-gray-900 flex items-center justify-center">
+            <Icon name="streamline-freehand-color:app-window-source-code" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+            Developer Ready
+          </Headline>
+          <p class="text-gray-600">Complete documentation, TypeScript support, and easy npm installation for quick project setup.</p>
+        </div>
+      </div>
+    </section>
+
     <div
       class="mt-12 py-20 bg-blue-darker bg-vw text-white flex items-center justify-center relative"
     >
@@ -86,44 +148,113 @@ const navItems = [
       </Quote>
     </div>
 
-    <div class="px-4 grid lg:grid-cols-2 gap-4 md:gap-10 max-w-5xl mx-auto text-center py-12 md:px-0">
-
-      <div>
-        <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Download:</Headline>
-        <div class="grid grid-flow-col gap-4 auto-cols-max text-6xl mb-12">
-          <a href="https://www.npmjs.com/package/spoko-design-system" rel="noopener" title="npm page" class="hover:text-accent-light">
-            <Icon name="mdi:npm"/>
-          </a>
-          <a href="https://github.com/polo-blue/sds" rel="noopener" title="Github Page" class="hover:text-accent-light">
-            <Icon name="mdi:github"/>
-          </a>
+    <!-- Download & Examples Section -->
+    <section class="py-16 px-4 max-w-6xl mx-auto">
+      <div class="grid lg:grid-cols-2 gap-8 md:gap-12">
+
+        <!-- Download Section -->
+        <div class="text-center">
+          <Headline underline as="h2" class="text-gray-900 mb-8" textSize="3xl">
+            <Icon name="streamline-freehand-color:archive-box" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+            Get Started
+          </Headline>
+
+          <!-- Installation Commands -->
+          <div class="bg-gray-900 rounded-lg p-6 mb-6 text-left space-y-4">
+            <div>
+              <p class="text-gray-400 text-sm mb-2">Install via npm:</p>
+              <code class="text-green-400 font-mono text-lg">npm install spoko-design-system</code>
+            </div>
+            <div>
+              <p class="text-gray-400 text-sm mb-2">Or with pnpm (recommended):</p>
+              <code class="text-blue-400 font-mono text-lg">pnpm add spoko-design-system</code>
+            </div>
+          </div>
+
+          <!-- Download Links -->
+          <div class="flex justify-center gap-6 mb-6">
+            <a href="https://www.npmjs.com/package/spoko-design-system"
+               target="_blank"
+               rel="noopener noreferrer"
+               class="flex items-center gap-3 bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg transition-colors">
+              <Icon name="mdi:npm" class="text-3xl" />
+              <span class="font-semibold">npm Package</span>
+            </a>
+            <a href="https://github.com/polo-blue/sds"
+               target="_blank"
+               rel="noopener noreferrer"
+               class="flex items-center gap-3 bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 rounded-lg transition-colors">
+              <Icon name="mdi:github" class="text-2xl" />
+              <span class="font-semibold">Source Code</span>
+            </a>
+          </div>
+
+          <p class="text-gray-600 text-sm">
+            TypeScript support included • Complete documentation • Production ready
+          </p>
         </div>
-      </div>
- 
-
-     <div>
-      <Headline underline as="div" class="mx-auto text-gray-900" textSize="3xl">Examples:</Headline>
-      <ul class="flex flex-wrap text-2xl pt-6 lg:(py-4 gap-4) text-left justify-center lg:justify-start w-full">
-        <li class="leading-5 me-6 mb-4 lg:mb-0 flex-shrink-0">
-          <a href="https://catalog.polo.blue" class="example-link whitespace-nowrap" target="_blank"> catalog.polo.blue</a>
-        </li>
-        <li class="leading-5 me-6 mb-4 lg:mb-0 flex-shrink-0">
-          <a href="https://polo.blue" class="example-link whitespace-nowrap" target="_blank"> polo.blue</a>
-        </li>
-        <li class="leading-5 me-6 mb-4 lg:mb-0 flex-shrink-0">
-          <a href="https://spoko.space" class="example-link whitespace-nowrap" target="_blank"> spoko.space</a>
-        </li>
-        <li class="leading-5 me-6 mb-4 lg:mb-0 flex-shrink-0">
-          <a href="https://sale.polo.blue/" class="example-link whitespace-nowrap" target="_blank">sale.polo.blue</a>
-        </li>
-        <li class="leading-5 me-6 mb-4 lg:mb-0 flex-shrink-0">
-          <a href="https://polo6r.pl" class="example-link whitespace-nowrap" target="_blank">polo6r.pl</a>
-        </li>
-      </ul>
-     </div>
 
+        <!-- Examples Section -->
+        <div class="text-center">
+          <Headline underline as="h2" class="text-gray-900 mb-8" textSize="3xl">
+            <Icon name="streamline-freehand-color:app-window-source-code" aria-hidden="true" class="text-3xl text-blue-400 mr-3" />
+            Live Examples
+          </Headline>
 
-    </div>
+          <!-- Example Sites Grid -->
+          <div class="grid gap-4 mb-6">
+            <a href="https://catalog.polo.blue"
+               target="_blank"
+               rel="noopener noreferrer"
+               class="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:border-blue-400 hover:shadow-md transition-all group">
+              <div class="text-left">
+                <h4 class="font-semibold text-gray-900 group-hover:text-blue-600">catalog.polo.blue</h4>
+                <p class="text-sm text-gray-600">Car parts catalog</p>
+              </div>
+              <Icon name="lucide:link" class="text-gray-400 group-hover:text-blue-400" />
+            </a>
+
+            <a href="https://polo.blue"
+               target="_blank"
+               rel="noopener noreferrer"
+               class="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:border-blue-400 hover:shadow-md transition-all group">
+              <div class="text-left">
+                <h4 class="font-semibold text-gray-900 group-hover:text-blue-600">polo.blue</h4>
+                <p class="text-sm text-gray-600">Polo 6R DIY workshop & guides</p>
+              </div>
+              <Icon name="lucide:link" class="text-gray-400 group-hover:text-blue-400" />
+            </a>
+
+            <a href="https://sale.polo.blue/"
+               target="_blank"
+               rel="noopener noreferrer"
+               class="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:border-blue-400 hover:shadow-md transition-all group">
+              <div class="text-left">
+                <h4 class="font-semibold text-gray-900 group-hover:text-blue-600">sale.polo.blue</h4>
+                <p class="text-sm text-gray-600">Used car parts marketplace</p>
+              </div>
+              <Icon name="lucide:link" class="text-gray-400 group-hover:text-blue-400" />
+            </a>
+
+            <a href="https://polo6r.pl"
+               target="_blank"
+               rel="noopener noreferrer"
+               class="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg hover:border-blue-400 hover:shadow-md transition-all group">
+              <div class="text-left">
+                <h4 class="font-semibold text-gray-900 group-hover:text-blue-600">polo6r.pl</h4>
+                <p class="text-sm text-gray-600">Polo V Manual</p>
+              </div>
+              <Icon name="lucide:link" class="text-gray-400 group-hover:text-blue-400" />
+            </a>
+          </div>
+
+          <p class="text-gray-600 text-sm">
+            See the design system in action across different project types
+          </p>
+        </div>
+
+      </div>
+    </section>
   </div>
   <script is:inline></script>
 </Layout>

package/src/utils/category/getMainCategoryList.ts

@@ -1,31 +1,22 @@
 import type { CatObject  } from "@types/index";
 
-import i18next, { t } from "i18next";
 import { getApiCategories } from "@utils/api/getCategories";
 import { getSortedCategories } from "@utils/category/getSortedCategories";
 
 // Retrieve main categories:
 export const getMainCategoryList = async (locale: string = 'en'): Promise<CatObject[]> => {
-  // Set the selected language
-  await i18next.changeLanguage(locale);
-
   // Fetch categories from API
   const categories = await getApiCategories();
 
-  // Map categories with translations
-  const translatedCategories = categories.map((category) => {
-    const name = t(`cat.${category.slug}.name`);
-    const desc = i18next.exists(`cat.${category.slug}.desc`)
-      ? t(`cat.${category.slug}.desc`)
-      : '';
-
-    if (!desc) {
-      console.warn('No category description', category.slug, i18next.language);
-    }
-
-    return { ...category, name, desc };
+  // Use category data directly (English only)
+  const processedCategories = categories.map((category) => {
+    return {
+      ...category,
+      name: category.name || category.slug,
+      desc: category.desc || ''
+    };
   });
 
   // Sort and return processed categories
-  return translatedCategories.sort(getSortedCategories);
+  return processedCategories.sort(getSortedCategories);
 };

package/src/utils/product/getPriceFormatted.ts

@@ -1,15 +1,12 @@
-import i18next from "i18next";
-
 export const getPriceFormatted  = (product: any) => {
-    if (i18next.language === 'en') {
-      return  new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.price_eur, )
-    }
-    if (i18next.language === 'pl') {
-      return  new Intl.NumberFormat('pl-PL', { style: 'currency', currency: 'PLN' }).format(product.price_pln, )
+    // Default to EUR formatting for English-only design system
+    if (product.price_eur) {
+      return  new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(product.price_eur)
     }
-    else {
-      return 'no price'
+    if (product.price_pln) {
+      return  new Intl.NumberFormat('pl-PL', { style: 'currency', currency: 'PLN' }).format(product.price_pln)
     }
+    return 'no price'
   }