feature/services-pages (#7)

Reviewed-on: #7
Co-authored-by: mifi <badmf@mifi.dev>
Co-committed-by: mifi <badmf@mifi.dev>

src/lib/components/Breadcrumbs.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    interface BreadcrumbItem {
+        label: string;
+        href?: string;
+    }
+
+    const {
+        items = [],
+    }: {
+        items: BreadcrumbItem[];
+    } = $props();
+</script>
+
+<nav class="section breadcrumbs" aria-label="Breadcrumbs">
+    <div class="container">
+        <ol class="list">
+            {#each items as item, index}
+                <li class="item">
+                    {#if item.href}
+                        <a href={item.href}>{item.label}</a>
+                        {#if index < items.length - 1}<span
+                                class="separator"
+                                aria-hidden="true">&gt;</span
+                            >{/if}
+                    {:else}
+                        {item.label}
+                    {/if}
+                </li>
+            {/each}
+        </ol>
+    </div>
+</nav>
+
+<style>
+    .breadcrumbs {
+        padding: var(--space-md) 0;
+        font-size: var(--font-size-small);
+        color: var(--color-text-secondary);
+    }
+
+    .list {
+        display: inline-block;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .item {
+        display: inline;
+    }
+
+    .item a {
+        color: var(--color-text-secondary);
+        text-decoration: none;
+    }
+
+    .separator {
+        font-size: var(--font-size-small);
+        margin-inline: var(--space-xs);
+    }
+</style>