init git

components/compare/spec/Item.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="compare-spec-item">
+        <h3>{{ title }}</h3>
+        <ul>
+            <li v-for="item in items" :key="item">
+                <span>{{ item }}</span>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps(['data'])
+const { title , items } = props.data
+</script>
+
+<style lang="scss">
+.compare-spec-item {
+    @apply flex flex-col gap-[1.1rem];
+
+    h3 {
+        @apply text-[#999999] text-xs lg:text-base font-normal font-vazir text-center lg:text-right;
+    }
+
+    ul {
+        @apply flex;
+
+        li {
+            @apply w-full lg:w-[28.1rem] text-center;
+
+            span {
+                @apply text-[#333333] text-xs font-normal font-vazir lg:text-base lg:font-medium;
+            }
+
+            &:last-child{
+                // @apply max-lg:text-left;
+            }
+        }
+    }
+
+}
+</style>

components/compare/spec/List.vue

@@ -0,0 +1,32 @@
+<template>
+    <section class="compare-specs">
+        <h2>{{ $t('specifications') }}</h2>
+        <ul>
+            <li v-for="(items, title) in sortedSpecs" :key="title">
+                <CompareSpecItem :data="{ items, title }" />
+            </li>
+        </ul>
+    </section>
+</template>
+
+<script setup>
+const { sortedSpecs } = inject('data')
+</script>
+
+<style lang="scss">
+.compare-specs {
+    @apply mt-[1.9rem] container lg:w-[107.6rem] flex flex-col gap-8 mx-auto mb-[5.6rem];
+
+    &>h2 {
+        @apply text-zinc-800 text-sm lg:text-base font-medium font-vazir
+    }
+
+    &>ul {
+        @apply flex flex-col gap-6;
+
+        &>li {
+            @apply h-[5.1rem] lg:h-[5.1rem] border-b border-neutral-200;
+        }
+    }
+}
+</style>