specifications section

src/app/product/[id]/page.tsx

@@ -11,6 +11,7 @@ import {
 import ProductImage from '../components/ProductImage'
 import BaseInformation from '../components/BaseInformation'
 import ShopInformation from '../components/ShopInformation'
+import Specifications from '../components/Specifications'
 
 const SingleProduct: NextPage = () => {
     return (
@@ -40,6 +41,11 @@ const SingleProduct: NextPage = () => {
                 <BaseInformation />
                 <ShopInformation />
             </div>
+
+            <div className='flex gap-6'>
+                <Specifications />
+                <div className='min-w-[325px] px-7'></div>
+            </div>
         </div>
     )
 }

src/app/product/components/ShopInformation.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 
 const ShopInformation = () => {
     return (
-        <div className='w-[325px] bg-[#FAFAFA] rounded-[10px] p-7 border border-border'>
+        <div className='w-[325px] bg-[#FAFAFA] rounded-[10px] p-7 border border-border h-fit'>
             <div className='text-lg text-[#191919]'>
                 فروشنده
             </div>

src/app/product/components/Specifications.tsx

@@ -0,0 +1,64 @@
+import { FC, Fragment } from 'react'
+import { Separator } from '@/components/ui/separator'
+
+type SpecItem = {
+    label: string
+    value: string | string[]
+}
+
+const SPEC_ITEMS: SpecItem[] = [
+    { label: 'ابعاد', value: 'میلی‌متر 163.3×79×8.6' },
+    { label: 'وزن', value: '233 گرم' },
+    { label: 'توضیحات سیم کارت', value: 'سایز نانو (12.3 × 8.8 میلی‌متر)' },
+    {
+        label: 'ویژگی‌های خاص',
+        value: [
+            'مجهز به حس‌گر اثرانگشت',
+            'مقاوم در برابر آب',
+            'مناسب بازی',
+            'مناسب عکاسی',
+            'مناسب عکاسی سلفی',
+        ],
+    },
+    { label: 'تعداد سیم کارت', value: 'دو عدد' },
+]
+
+const Specifications: FC = () => {
+    return (
+        <div className="mt-16 w-full">
+            <div className="flex items-center justify-end gap-3 flex-row-reverse">
+                <h2 className="text-primary text-lg">مشخصات</h2>
+                <div className="w-1 h-6 bg-primary rounded"></div>
+            </div>
+
+            <div className="mt-6 rounded-xl bg-white">
+                {SPEC_ITEMS.map((item, index) => (
+                    <Fragment key={item.label}>
+                        <div className="grid grid-cols-12 items-start px-6 py-5">
+                            <div className="col-span-12 md:col-span-3 flex items-center justify-end gap-2 text-[#7F7F7F] flex-row-reverse">
+                                <span className="text-sm">{item.label}</span>
+                                <span className="size-1.5 rounded-full bg-[#7F7F7F]"></span>
+                            </div>
+                            <div className="col-span-12 md:col-span-9">
+                                {Array.isArray(item.value) ? (
+                                    <div className="flex flex-col gap-3 text-sm text-[#333333] text-center md:text-center">
+                                        {item.value.map((v) => (
+                                            <div key={v}>{v}</div>
+                                        ))}
+                                    </div>
+                                ) : (
+                                    <div className="text-sm text-[#333333] text-center md:text-center">{item.value}</div>
+                                )}
+                            </div>
+                        </div>
+                        {index !== SPEC_ITEMS.length - 1 && <Separator />}
+                    </Fragment>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default Specifications
+
+