shop main section

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

@@ -0,0 +1,47 @@
+import { NextPage } from 'next'
+import withLayout from '@/hoc/withLayout'
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb'
+import ProductImage from '../components/ProductImage'
+import BaseInformation from '../components/BaseInformation'
+import ShopInformation from '../components/ShopInformation'
+
+const SingleProduct: NextPage = () => {
+    return (
+        <div className='mt-14 px-20'>
+            <div className='flex justify-between'>
+                <Breadcrumb aria-label="breadcrumb">
+                    <BreadcrumbList className="text-sm text-muted-foreground">
+                        <BreadcrumbItem>
+                            <BreadcrumbLink href="/">فروشگاه آناهیتا</BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="text-muted-foreground select-none">/</BreadcrumbSeparator>
+                        <BreadcrumbItem>
+                            <BreadcrumbLink href="/products">بهداشت خانگی</BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator className="text-muted-foreground select-none">/</BreadcrumbSeparator>
+                        <BreadcrumbItem>
+                            <BreadcrumbPage className="text-foreground">مواد شوینده</BreadcrumbPage>
+                        </BreadcrumbItem>
+                    </BreadcrumbList>
+                </Breadcrumb>
+
+                <div className='text-primary text-sm'>فروشنده شوید</div>
+            </div>
+
+            <div className='flex gap-6 mt-14'>
+                <ProductImage />
+                <BaseInformation />
+                <ShopInformation />
+            </div>
+        </div>
+    )
+}
+
+export default withLayout(SingleProduct)

src/app/product/components/ActionProduct.tsx

@@ -0,0 +1,18 @@
+import { Chart2, Heart, Hierarchy2, Notification, RowHorizontal } from 'iconsax-react'
+import { FC } from 'react'
+
+const ActionProduct: FC = () => {
+    return (
+        <div className='absolute top-6 right-6'>
+            <div className='flex flex-col gap-5'>
+                <Heart size={20} color='#333333' />
+                <Hierarchy2 size={20} color='#333333' />
+                <Notification size={20} color='#333333' />
+                <Chart2 size={20} color='#333333' />
+                <RowHorizontal size={20} color='#333333' variant='Bulk' />
+            </div>
+        </div>
+    )
+}
+
+export default ActionProduct

src/app/product/components/BaseInformation.tsx

@@ -0,0 +1,65 @@
+import { Star1 } from 'iconsax-react'
+import { FC } from 'react'
+
+const BaseInformation: FC = () => {
+    return (
+        <div className='flex-1'>
+            <h1 className='text-lg text-[#191919]'>
+                گوشی موبایل سامسونگ مدل Galaxy S24 Ultra دو سیم کارت ظرفیت 1 ترابایت و رم 12 گیگابایت - ویتنام
+            </h1>
+
+            <p className='mt-6 text-[#B2B2B2] text-sm'>
+                Samsung Galaxy S24 Ultra Dual SIM 256GB And 12GB RAM Mobile Phone - Vietnam
+            </p>
+
+            <div className='mt-4 flex gap-4 items-center'>
+                <h3 className='text-primary'>
+                    سامسونگ
+                </h3>
+                <div className='size-1.5 rounded-full bg-[#E5E5E5]'></div>
+                <div className='flex items-center gap-1'>
+                    <Star1 size={20} color='#FFC107' variant='Bold' />
+                    <span className='text-sm'>3.5</span>
+                </div>
+                <div className='size-1.5 rounded-full bg-[#E5E5E5]'></div>
+                <div className='text-primary'>
+                    8 دیدگاه
+                </div>
+            </div>
+
+            <div className='mt-6 text-[#333333]'>
+                رنگ : طلایی
+            </div>
+
+            <div className='mt-2 flex gap-1.5'>
+                <div className='size-8 rounded-full bg-red-200'></div>
+                <div className='size-8 rounded-full bg-blue-200'></div>
+                <div className='size-8 rounded-full bg-yellow-200'></div>
+            </div>
+
+            <div className='mt-7 text-lg text-[#333333]'>
+                ویژگی های کلیدی
+            </div>
+
+            <div className='mt-10 flex flex-col gap-8'>
+                <div className='flex gap-3 items-center text-sm'>
+                    <div className='size-2 rounded-full bg-[#7F7F7F]'></div>
+                    <div className='text-[#7F7F7F]'>فناوری صفحه‌ نمایش :</div>
+                    <div>Dynamic LTPO AMOLED 2X</div>
+                </div>
+                <div className='flex gap-3 items-center text-sm'>
+                    <div className='size-2 rounded-full bg-[#7F7F7F]'></div>
+                    <div className='text-[#7F7F7F]'>رزولوشن عکس :</div>
+                    <div>200 مگاپیکسل</div>
+                </div>
+                <div className='flex gap-3 items-center text-sm'>
+                    <div className='size-2 rounded-full bg-[#7F7F7F]'></div>
+                    <div className='text-[#7F7F7F]'>نسخه سیستم عامل :</div>
+                    <div>Android 14</div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default BaseInformation

src/app/product/components/ProductImage.tsx

@@ -0,0 +1,28 @@
+import Image from 'next/image'
+import { FC } from 'react'
+import ActionProduct from './ActionProduct'
+
+const ProductImage: FC = () => {
+    return (
+        <div className='w-[380px]'>
+            <div className='w-full border border-border rounded-xl h-[400px] flex justify-center items-center relative'>
+                <Image
+                    src={'https://dkstatics-public.digikala.com/digikala-products/c0a7ce006d11c222bce16bd3cdd8d79aeb6689bc_1738134271.jpg?x-oss-process=image/resize,m_lfit,h_800,w_800/format,webp/quality,q_90'}
+                    width={300}
+                    height={300}
+                    alt=''
+                    className='max-w-[240px] max-h-[240px] object-contain'
+                />
+                <ActionProduct />
+            </div>
+            <div className='flex gap-3 mt-4'>
+                <div className='size-20 border border-border rounded-xl'></div>
+                <div className='size-20 border border-border rounded-xl'></div>
+                <div className='size-20 border border-border rounded-xl'></div>
+                <div className='size-20 border border-border rounded-xl'></div>
+            </div>
+        </div>
+    )
+}
+
+export default ProductImage

src/app/product/components/ShopInformation.tsx

@@ -0,0 +1,74 @@
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { ArchiveTick, BoxTick, I3DRotate } from 'iconsax-react'
+import React from 'react'
+
+const ShopInformation = () => {
+    return (
+        <div className='w-[325px] bg-[#FAFAFA] rounded-[10px] p-7 border border-border'>
+            <div className='text-lg text-[#191919]'>
+                فروشنده
+            </div>
+
+            <div className='mt-9 flex gap-3 border-b border-border pb-4'>
+                <div className='size-7 rounded-full bg-primary'></div>
+                <div>
+                    <div className='text-[#333333] text-sm'>فروشگاه سندس</div>
+                    <div className='mt-2 text-xs text-[#999999] font-light flex items-center gap-2'>
+                        <div>
+                            <span className='text-[#019907]'>50%</span> رضایت کالا
+                        </div>
+                        <Separator orientation='vertical' style={{ height: 20 }} />
+                        <div>عملکرد خیلی خوب</div>
+                    </div>
+                </div>
+            </div>
+
+            <div className='flex gap-4 text-sm font-light border-b border-border pb-4 mt-4'>
+                <ArchiveTick size={20} color='#333333' />
+                <div>گارانتی اصالت و سلامت فیزیکی کالا</div>
+            </div>
+
+            <div className='mt-4'>
+                <div className='flex gap-4 text-sm font-light'>
+                    <ArchiveTick size={20} color='#333333' />
+                    <div>گارانتی اصالت و سلامت فیزیکی کالا</div>
+                </div>
+            </div>
+            <div className='mt-6 border-b border-border pb-4'>
+                <div className='flex gap-4 text-sm font-light'>
+                    <BoxTick size={20} color='blue' />
+                    <div className='text-[#999999]'>ارسال از سندس حداکثر پس از 3 روز کاری</div>
+                </div>
+            </div>
+
+            <div className='flex gap-4 text-sm font-light border-b border-border pb-4 mt-4'>
+                <I3DRotate size={20} color='blue' />
+                <div className='text-primary'>گارانتی اصالت و سلامت فیزیکی کالا</div>
+            </div>
+
+            <div className='mt-4 text-sm text-[#999999] font-light flex justify-between'>
+                <div>قیمت برای شما</div>
+                <div className='line-through text-base'>70,400,000</div>
+            </div>
+
+            <div className='mt-3 flex justify-between items-center'>
+                <div className='h-6 text-xs px-3 bg-primary rounded-full text-white w-fit flex items-center justify-center'>
+                    5%
+                </div>
+                <div>
+                    <span className='text-lg'>70,400,000</span> <span className='text-xs'>تومان</span>
+                </div>
+            </div>
+
+            <Button className='w-full mt-8'>
+                افزودن به سبد خرید
+            </Button>
+            <Button className='w-full mt-3 bg-[#323232]'>
+                گفتگو با فروشنده
+            </Button>
+        </div>
+    )
+}
+
+export default ShopInformation