added header

frontend/components/global/Header.vue

@@ -1,11 +1,71 @@
-<script setup></script>
+<script setup lang="ts">
+// types
+
+type NavLink = {
+    title: string;
+    path: string;
+};
+
+// state
+
+const nav_links = ref<NavLink[]>([
+    {
+        title: "Shop",
+        path: "#",
+    },
+    {
+        title: "Collections",
+        path: "#",
+    },
+    {
+        title: "Explore",
+        path: "#",
+    },
+    {
+        title: "Contact",
+        path: "#",
+    },
+    {
+        title: "Theme features",
+        path: "#",
+    },
+]);
+</script>
 
 <template>
-    <div class="w-full flex items-center justify-between bg-white">
+    <header class="w-full bg-white flex-center">
-        <div class="w-3/12 flex items-center justify-start">
+        <div
+            class="w-full flex items-center justify-between container py-[2.25rem]"
+        >
+            <div class="w-2/12 flex items-center justify-start">
                 <span class="size-[2rem] bg-black rounded-full"></span>
             </div>
+
+            <nav
+                class="flex-center gap-[2.5rem] w-8/12 typo-label-sm text-slate-500"
+            >
+                <NuxtLink
+                    v-for="(link, index) in nav_links"
+                    :key="index"
+                    :to="link.path"
+                >
+                    {{ link.title }}
+                </NuxtLink>
+            </nav>
+
+            <div class="w-2/12 flex items-center justify-end gap-[1.5rem]">
+                <button class="size-[1.5rem] flex-center">
+                    <Icon name="ci:search" class="**:stroke-black" />
+                </button>
+                <button class="size-[1.5rem] flex-center">
+                    <Icon name="ci:profile" class="**:stroke-black" />
+                </button>
+                <button class="size-[1.5rem] flex-center">
+                    <Icon name="ci:cart" class="**:stroke-black" />
+                </button>
             </div>
+        </div>
+    </header>
 </template>
 
 <style lang="scss" scoped></style>