Merge branch 'main' of https://github.com/Byeto-Company/hossein_por_shop

frontend/assets/css/tailwind.css

@@ -91,7 +91,6 @@
     --color-danger-900: hsl(0, 63%, 31%);
     --color-danger-950: hsl(0, 75%, 15%);
 
-
     /* BORDER RADIUS */
     --radius-50: 5px;
     --radius-100: 10px;
@@ -100,25 +99,21 @@
     --radius-250: 25px;
     --radius-360: 99999999px;
 
-
     /* FONT WEIGHT */
     --font-weight-extrablack: 950;
     --font-weight-heavy: 1000;
 
-
     /* FONT FAMILY */
     --font-lato: "Lato", sans-serif;
     --font-inter: "Inter", sans-serif;
     --font-dmsans: "DM Sans", sans-serif;
     --font-iran-yekan-x: "IRANYekanXVF, sans-serif";
 
-
     /* BREAKPOINTS */
     --breakpoint-3xl: 1700px;
     --breakpoint-2xs: 400px;
     --breakpoint-xs: 480px;
 
-
     /* ANIMATIONS */
     --animate-marquee: marquee 3s linear infinite;
 
@@ -128,3 +123,12 @@
         }
     }
 }
+
+/* CONTAINER */
+
+@utility container {
+    padding-inline: 3rem;
+    @screen xl {
+        padding-inline: 5rem;
+    }
+}

frontend/components/global/Header.vue

@@ -0,0 +1,11 @@
+<script setup></script>
+
+<template>
+    <div class="w-full flex items-center justify-between bg-white">
+        <div class="w-3/12 flex items-center justify-start">
+            <span class="size-[2rem] bg-black rounded-full"></span>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped></style>

frontend/layouts/Default.vue

@@ -8,15 +8,12 @@
 //         await suspense();
 //     }
 // });
-
 </script>
 
 <template>
-    <div
-        class="w-full font-dmsans"
-        dir="rtl"
-    >
-        <main class="w-full overflow-x-hidden">
+    <div class="w-full flex flex-col font-dmsans" dir="rtl">
+        <Header />
+        <main class="w-full overflow-x-hidden container">
             <slot />
         </main>
     </div>

frontend/nuxt.config.ts

@@ -12,6 +12,13 @@ export default defineNuxtConfig({
         },
     },
 
+    components: [
+        {
+            path: "~/components",
+            pathPrefix: false,
+        },
+    ],
+
     icon: {
         mode: "svg",
         customCollections: [