feat: added product page

src/lib/components/ui/specCard/SpecCard.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import type { Specification } from '$lib'
   import * as Card from '../card'
-  import { m } from '$lib/paraglide/messages'
   import * as Tabs from '../tabs'
   import SpecTable from './SpecTable.svelte'
+  import { T } from '@tolgee/svelte'
 
   const { specifications }: { specifications: Specification[] } = $props()
 
@@ -12,13 +12,15 @@
 
 <Card.Root>
   <Card.Header>
-    {m.specification_title()}
+    <T keyName="specs.title" />
   </Card.Header>
   <Card.Content>
     <Tabs.Root bind:value={selectedSpec}>
       <Tabs.List class="w-full">
         {#each specifications as spec (spec.title)}
-          <Tabs.Trigger value={spec.title}>{spec.title}</Tabs.Trigger>
+          <Tabs.Trigger value={spec.title}>
+            <T keyName={`specs.tabs.${spec.title}`} />
+          </Tabs.Trigger>
         {/each}
       </Tabs.List>
       {#each specifications as spec (spec.title)}

src/lib/components/ui/specCard/SpecRow.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { SpecificationAttribute } from '$lib'
+  import { T } from '@tolgee/svelte'
 
   const { attribute }: { attribute: SpecificationAttribute } = $props()
 </script>
@@ -7,6 +8,8 @@
 <div
   class="flex justify-between py-2 border-b border-gray-200 dark:border-gray-700"
 >
-  <dt class="text-gray-600 dark:text-gray-400">{attribute.key}</dt>
+  <dt class="text-gray-600 dark:text-gray-400">
+    <T keyName={`specs.${attribute.key}`} />
+  </dt>
   <dd class="dark:text-gray-200">{attribute.value}</dd>
 </div>