From f2d5203fa5aa669cbba6f108a17f7a7a0ec65ddc Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Thu, 26 Dec 2024 20:51:04 +0330
Subject: [PATCH] new changes

---
 .../components/product/ProductDetails.vue     | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 frontend/components/product/ProductDetails.vue

diff --git a/frontend/components/product/ProductDetails.vue b/frontend/components/product/ProductDetails.vue
new file mode 100644
index 0000000..6ba8b56
--- /dev/null
+++ b/frontend/components/product/ProductDetails.vue
@@ -0,0 +1,38 @@
+<template>
+    <section class="w-full p-[5rem] flex flex-col gap-y-[1.5rem]">
+        <div class="w-full flex">
+            <span class="text-black typo-h-3"> جزيات محصول </span>
+        </div>
+        <div class="w-full flex items-start justify-between gap-[3rem]">
+            <div class="w-8/12">
+                <Accordion />
+            </div>
+            <div class="w-4/12">
+                <div
+                    class="w-full bg-slate-50 rounded-xl flex-col-center p-[5rem] gap-[1.5rem]"
+                >
+                    <span>داخل جعبه چیه؟</span>
+                    <div
+                        class="w-full grid grid-cols-2 gap-y-[1.5rem] gap-x-[3rem]"
+                    >
+                        <div
+                            v-for="i in 4"
+                            class="w-full flex-col-center gap-[.75rem]"
+                        >
+                            <div
+                                class="size-[6.25rem] rounded-full border-slate-200 bg-white flex-center"
+                            >
+                                <Icon name="ci:flag" size="44" />
+                            </div>
+                            <span class="text-black typo-p-md">Headphones</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>