danak/shop-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive

Browse Source
This commit is contained in:
hamid zarghami
2025-09-03 15:06:15 +03:30
parent 138f26e293
commit d051e7110a
33 changed files with 440 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/about/page.tsx
+12 -12
View File
@@ -27,42 +27,42 @@ const AboutPage: NextPage = () => {
return (
<Layout>
<div className="mt-14 px-4 md:px-8 lg:px-20 max-w-full overflow-x-hidden">
<div className="mt-14 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20 max-w-full overflow-x-hidden">
{/* عنوان اصلی */}
<div className="text-center mb-16">
<h1 className="text-3xl font-bold text-gray-800">
<div className="text-center mb-8 sm:mb-12 lg:mb-16">
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-800">
درباره ی ما
</h1>
</div>
{/* بخش‌های محتوا */}
<div className="space-y-12">
<div className="space-y-8 sm:space-y-10 lg:space-y-12">
{aboutData.map((item) => (
<div
key={item._id}
className="flex flex-col lg:flex-row items-start gap-8"
className="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 lg:gap-8"
>
{/* تصویر در سمت چپ */}
<div className="rounded-lg flex-shrink-0 overflow-hidden">
{/* تصویر */}
<div className="rounded-lg flex-shrink-0 overflow-hidden w-full sm:w-auto">
<Image
src={item.imageUrl}
alt={item.title}
className="w-[100px]"
className="w-full sm:w-[120px] md:w-[140px] lg:w-[160px] h-auto object-cover"
loading="lazy"
width={200}
height={200}
/>
</div>
{/* محتوای متنی در سمت راست */}
<div className="flex-1 space-y-4">
{/* محتوای متنی */}
<div className="flex-1 space-y-3 sm:space-y-4 text-center sm:text-right">
{/* عنوان بخش */}
<h3 className="text-lg font-bold text-primary">
<h3 className="text-base sm:text-lg lg:text-xl font-bold text-primary">
{item.title}
</h3>
{/* توضیحات */}
<p className="font-light leading-6">
<p className="font-light leading-5 sm:leading-6 text-sm sm:text-base">
{item.description}
</p>
</div>
src/app/auth/components/LoginStep1.tsx
+6 -6
View File
@@ -53,18 +53,18 @@ const LoginStep1 = () => {
return (
<div className='flex-1 flex flex-col justify-center'>
<div className='text-[#CCCCCC] text-2xl font-black'>ورود و ثبت نام</div>
<div className='mt-8'>
<div className='flex-1 flex flex-col justify-center px-2 sm:px-0'>
<div className='text-[#CCCCCC] text-xl sm:text-2xl font-black text-center sm:text-right'>ورود و ثبت نام</div>
<div className='mt-6 sm:mt-8'>
<Input
placeholder='09120000000'
className='text-left h-11'
className='text-left h-10 sm:h-11'
{...register("phone")}
error_text={errors.phone?.message}
/>
</div>
<div className='mt-8'>
<Button isLoading={isPending} onClick={handleSubmit(onSubmit)} className='w-full h-11'>دریافت کد</Button>
<div className='mt-6 sm:mt-8'>
<Button isLoading={isPending} onClick={handleSubmit(onSubmit)} className='w-full h-10 sm:h-11'>دریافت کد</Button>
</div>
</div>
)
src/app/auth/components/LoginStep2.tsx
+11 -11
View File
@@ -80,9 +80,9 @@ const LoginStep2: FC = () => {
}, [watch('otpCode')])
return (
<div className='flex-1 flex flex-col justify-center'>
<div className='text-[#CCCCCC] text-2xl font-black'>کد دریافتی را وارد نمایید</div>
<div className='mt-8 dltr otp'>
<div className='flex-1 flex flex-col justify-center px-2 sm:px-0'>
<div className='text-[#CCCCCC] text-xl sm:text-2xl font-black text-center sm:text-right'>کد دریافتی را وارد نمایید</div>
<div className='mt-6 sm:mt-8 dltr otp'>
<OTPInput
shouldAutoFocus
value={watch("otpCode")}
@@ -96,29 +96,29 @@ const LoginStep2: FC = () => {
type='tel'
autoComplete="one-time-code"
inputMode="numeric"
className='w-full h-[50px] flex-1 mx-2 bg-white border rounded-[10px]' />
className='w-full h-[45px] sm:h-[50px] flex-1 mx-1 sm:mx-2 bg-white border rounded-[10px] text-center text-lg sm:text-xl' />
}
/>
</div>
{
errors.otpCode?.message && <Error errorText={errors.otpCode.message} />
}
<div className='mt-8'>
<Button isLoading={isPending} className='w-full h-11' onClick={handleSubmit(onSubmit)}>تایید</Button>
<div className='mt-6 sm:mt-8'>
<Button isLoading={isPending} className='w-full h-10 sm:h-11' onClick={handleSubmit(onSubmit)}>تایید</Button>
</div>
{/* Countdown and Resend Section */}
<div className='mt-6'>
<div className='flex items-center justify-between'>
<span className='text-[#CCCCCC] text-sm'>کد فعالسازی را دریافت نکردید؟</span>
<div className='mt-4 sm:mt-6'>
<div className='flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-0'>
<span className='text-[#CCCCCC] text-xs sm:text-sm text-center sm:text-right'>کد فعالسازی را دریافت نکردید؟</span>
{countdownValue !== '00:00' ? (
<span className='text-blue-500 font-medium text-sm'>{countdownValue}</span>
<span className='text-blue-500 font-medium text-xs sm:text-sm'>{countdownValue}</span>
) : (
<Button
variant={'ghost'}
isLoading={isAuthenticationPending}
onClick={handleResendOtp}
className='text-blue-500 hover:text-blue-600 cursor-pointer text-sm font-medium transition-colors'
className='text-blue-500 hover:text-blue-600 cursor-pointer text-xs sm:text-sm font-medium transition-colors'
>
دوباره امتحان کنید
</Button>
src/app/auth/page.tsx
+23 -16
View File
@@ -11,10 +11,10 @@ const LoginPage: NextPage = () => {
const { step, phone } = useAuthStore()
return (
<div className='flex justify-center items-center h-screen'>
<div className='h-[450px] w-[1000px] border border-border rounded-xl flex p-10 gap-32'>
<div className='flex justify-center items-center min-h-screen p-4'>
<div className='w-full max-w-4xl border border-border rounded-xl flex flex-col lg:flex-row p-4 sm:p-6 lg:p-10 gap-6 lg:gap-16 xl:gap-32'>
<div className='flex-1'>
<div className='text-primary'>
<div className='text-primary text-sm sm:text-base'>
{step}/2
</div>
<div className='w-full h-0.5 mt-4 flex items-center'>
@@ -34,34 +34,39 @@ const LoginPage: NextPage = () => {
{
step === 1 ?
<div className='mt-20 flex gap-6'>
<div className='mt-8 sm:mt-12 lg:mt-20 flex flex-col sm:flex-row gap-4 sm:gap-6'>
<div className='flex justify-center sm:justify-start'>
<Image
src='/images/mobile.svg'
width={80}
height={131}
width={60}
height={98}
alt='phone'
className='sm:w-16 sm:h-[104px] lg:w-20 lg:h-[131px]'
/>
</div>
<div>
<div className='text-[#8B8B8B] text-xl'>Wellcome</div>
<div className='mt-2 font-black text-4xl text-[#4F4F4F]'>
<div className='text-center sm:text-right'>
<div className='text-[#8B8B8B] text-lg sm:text-xl'>Wellcome</div>
<div className='mt-2 font-black text-2xl sm:text-3xl lg:text-4xl text-[#4F4F4F]'>
خوش آمدید
</div>
<p className='mt-4 text-[#8B8B8B] text-sm'>
<p className='mt-4 text-[#8B8B8B] text-xs sm:text-sm max-w-md mx-auto sm:mx-0'>
برای دریافت کد فعالسازی شماره همراه یا ایمیل خود را وارد نمایید
</p>
</div>
</div>
:
<div className='mt-20 flex gap-6'>
<Messages1 size={90} color='#CCCCCC' />
<div className='mt-8 sm:mt-12 lg:mt-20 flex flex-col sm:flex-row gap-4 sm:gap-6'>
<div className='flex justify-center sm:justify-start'>
<Messages1 size={70} color='#CCCCCC' className='sm:w-20 sm:h-20 lg:w-[90px] lg:h-[90px]' />
</div>
<div>
<div className='text-[#8B8B8B] text-xl'>activation code</div>
<div className='mt-2 font-black text-4xl text-[#4F4F4F]'>
<div className='text-center sm:text-right'>
<div className='text-[#8B8B8B] text-lg sm:text-xl'>activation code</div>
<div className='mt-2 font-black text-2xl sm:text-3xl lg:text-4xl text-[#4F4F4F]'>
كد فعالسازی
</div>
<p className='mt-4 text-[#8B8B8B] text-sm'>
<p className='mt-4 text-[#8B8B8B] text-xs sm:text-sm max-w-md mx-auto sm:mx-0'>
کد فعالسازی به شماره همراه {phone} ارسال شد
</p>
</div>
@@ -69,9 +74,11 @@ const LoginPage: NextPage = () => {
}
</div>
<div className='flex-1 min-w-0'>
<LoginStep1 />
</div>
</div>
</div>
)
}
src/app/blogs/components/BlogItem.tsx
+6 -6
View File
@@ -5,25 +5,25 @@ import React from 'react'
const BlogItem = () => {
return (
<div className='flex-1 flex gap-6'>
<div className='flex-1 flex flex-col sm:flex-row gap-4 sm:gap-6'>
<Image
width={200}
height={160}
src={'https://picsum.photos/200/160'}
className='max-w-[200px] max-h-[160px] object-contain'
className='w-full sm:max-w-[200px] sm:max-h-[160px] h-48 sm:h-auto object-cover sm:object-contain'
alt='blog'
/>
<div>
<h6 className='font-bold'>
<div className='flex-1'>
<h6 className='font-bold text-base sm:text-lg'>
سامسونگ اولین لپ‌تاپ OLED یکپارچه را معرفی می‌کند
</h6>
<p className='mt-4 text-sm line-clamp-2 text-[#7F7F7F] leading-7'>
<p className='mt-3 sm:mt-4 text-sm line-clamp-2 sm:line-clamp-3 text-[#7F7F7F] leading-6 sm:leading-7'>
لپ تاپ گلکسی بوک 3 سامسونگ دارای یک پنل OLED خواهد بود که در آن از فناوری سلولی استفاده می‌شود و حسگرها مستقیماً در نمایشگر قرار می‌گیرند تا صفحه لمسی نازک‌تر و سبک‌تری داشته باشد.
</p>
<div className='flex mt-4 text-primary gap-1.5 items-center text-sm cursor-pointer'>
<div className='flex mt-3 sm:mt-4 text-primary gap-1.5 items-center text-sm cursor-pointer'>
<div className='text-sm'>
ادامه مطلب
</div>
src/app/blogs/components/LastPost.tsx
+4 -2
View File
@@ -3,14 +3,16 @@ import MiniBlogItem from './MiniBlogItem'
const LastPost: FC = () => {
return (
<div>
<div className='font-bold text-lg'>
<div className='w-full'>
<div className='font-bold text-base sm:text-lg mb-4'>
آخرین پست ها و مطالب
</div>
<div className='space-y-4'>
<MiniBlogItem />
<MiniBlogItem />
</div>
</div>
)
}
src/app/blogs/components/MiniBlogItem.tsx
+5 -5
View File
@@ -3,21 +3,21 @@ import React from 'react'
const MiniBlogItem = () => {
return (
<div className='flex gap-4 mt-6'>
<div className='flex gap-3 sm:gap-4 mt-4 sm:mt-6'>
<Image
width={123}
height={123}
src={'https://picsum.photos/123/123'}
alt='last post'
className='max-w-[100px] max-h-[100px] object-contain'
className='w-20 h-20 sm:max-w-[100px] sm:max-h-[100px] object-cover sm:object-contain flex-shrink-0'
/>
<div>
<h6 className='text-sm font-bold'>
<div className='flex-1 min-w-0'>
<h6 className='text-sm font-bold leading-5'>
رندرهای گلکسی M54 5G
</h6>
<p className='mt-3 text-xs text-[#7F7F7F]'>
<p className='mt-2 sm:mt-3 text-xs text-[#7F7F7F] line-clamp-2 leading-5'>
طبق رندرها، گلکسی M54 5G فاقد ماژول دوربین است و سنسورهای دوربین هر....
</p>
</div>
src/app/blogs/page.tsx
+9 -2
View File
@@ -6,15 +6,22 @@ import LastPost from './components/LastPost'
const BlogsPage: NextPage = () => {
return (
<div className='flex gap-24 p-10'>
<div className='flex flex-col lg:flex-row gap-6 lg:gap-24 p-4 sm:p-6 lg:p-10'>
{/* Categories - Hidden on mobile, shown on desktop */}
<div className='hidden lg:block'>
<Categories />
</div>
{/* Main content */}
<div className='flex-1 flex flex-col gap-6'>
<BlogItem />
<BlogItem />
<BlogItem />
<BlogItem />
</div>
<div className='max-w-[340px] w-full'>
{/* Last Post - Full width on mobile, sidebar on desktop */}
<div className='lg:max-w-[340px] w-full'>
<LastPost />
</div>
</div>
src/app/cart/components/CartItem.tsx
+32 -29
View File
@@ -16,65 +16,68 @@ const CartItem: FC<Props> = (props) => {
return (
<div className={clx(
'p-10 flex gap-10 border-t border-border',
'p-4 sm:p-6 lg:p-10 flex flex-col sm:flex-row gap-4 sm:gap-6 lg:gap-10 border-t border-border',
noBorder && 'border-0'
)}>
<div className="flex-shrink-0 flex justify-center sm:justify-start">
<Image
src={'https://dkstatics-public.digikala.com/digikala-products/40026b18c2b053ac4a68c3288556dc899a77aecd_1727277566.jpg?x-oss-process=image/resize,m_lfit,h_300,w_300/format,webp/quality,q_80'}
alt=''
width={200}
height={200}
className='max-w-[150px] max-h-[150px] object-contain'
className='w-24 h-24 sm:w-32 sm:h-32 lg:max-w-[150px] lg:max-h-[150px] object-contain'
/>
</div>
<div className='flex-1'>
<div className='flex justify-between items-center'>
<div className='max-w-[250px] truncate'>
<div className='flex-1 min-w-0'>
<div className='flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2 sm:gap-4'>
<div className='text-sm sm:text-base font-medium leading-relaxed sm:max-w-[250px] sm:truncate'>
گوشی موبایل سامسونگ مدل Galaxy S24 Ultra دو سیم کارت ظرفیت 1 ترابایت و رم 12 گیگابایت - ویتنام
</div>
<div>
70,400,000 <span className='text-xs'>تومان</span>
<div className="text-lg sm:text-xl font-semibold text-primary">
70,400,000 <span className='text-xs sm:text-sm'>تومان</span>
</div>
</div>
<div className='font-light text-[#333333]'>
<div className='flex items-center gap-2.5 mt-14'>
<div className='w-6'>
<div className='size-[14px] rounded-full bg-black'></div>
</div>
<div className='text-sm'>مشکی</div>
</div>
<div className='flex items-center gap-2.5 mt-4'>
<div className='w-6'>
<Shop size={20} color='#333333' />
<div className='font-light text-[#333333] mt-4 sm:mt-6 lg:mt-14'>
<div className='flex items-center gap-2.5 mb-3 sm:mb-4'>
<div className='w-5 sm:w-6 flex-shrink-0'>
<div className='size-3 sm:size-[14px] rounded-full bg-black'></div>
</div>
<div className='text-sm'>فروشنده فروشگاه سندس</div>
<div className='text-xs sm:text-sm'>مشکی</div>
</div>
<div className='flex items-center gap-2.5 mt-4'>
<div className='w-6'>
<ArchiveTick size={20} color='#333333' />
<div className='flex items-center gap-2.5 mb-3 sm:mb-4'>
<div className='w-5 sm:w-6 flex-shrink-0'>
<Shop size={16} color='#333333' className="sm:w-5 sm:h-5" />
</div>
<div className='text-sm'>گارانتی اصالت و سلامت فیزیکی کالا</div>
<div className='text-xs sm:text-sm'>فروشنده فروشگاه سندس</div>
</div>
<div className='flex justify-between'>
<div className='flex items-center gap-2.5 mt-4'>
<div className='w-6'>
<TruckFast size={20} color='blue' />
<div className='flex items-center gap-2.5 mb-4 sm:mb-6'>
<div className='w-5 sm:w-6 flex-shrink-0'>
<ArchiveTick size={16} color='#333333' className="sm:w-5 sm:h-5" />
</div>
<div className='text-sm'>ارسال از سندس حداکثر پس از 3 روز کاری</div>
<div className='text-xs sm:text-sm'>گارانتی اصالت و سلامت فیزیکی کالا</div>
</div>
<div className='flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4'>
<div className='flex items-center gap-2.5'>
<div className='w-5 sm:w-6 flex-shrink-0'>
<TruckFast size={16} color='blue' className="sm:w-5 sm:h-5" />
</div>
<div className='text-xs sm:text-sm'>ارسال از سندس حداکثر پس از 3 روز کاری</div>
</div>
<div className="flex justify-center sm:justify-end">
<CartControls
onChange={() => null}
onRemove={() => null}
quantity={1}
/>
</div>
</div>
</div>
</div>
</div>
)
src/app/cart/page.tsx
+13 -12
View File
@@ -7,29 +7,30 @@ import { NextPage } from "next"
const Cart: NextPage = () => {
return (
<div className="mt-14 px-4 sm:px-8 md:px-20">
<div className="border-b border-border flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0">
<div className="flex items-center gap-2 sm:gap-3 pb-4 sm:pb-6 border-b-2 border-primary relative top-[1px]">
<div className="text-sm sm:text-base">
<div className="mt-12 sm:mt-14 px-3 sm:px-4 md:px-8 lg:px-20">
<div className="border-b border-border flex flex-row justify-between items-center gap-3 sm:gap-4">
<div className="flex items-center gap-2 sm:gap-3 pb-3 sm:pb-4 lg:pb-6 border-b-2 border-primary relative top-[1px]">
<div className="text-sm sm:text-base lg:text-lg font-medium">
سبد خرید
</div>
<div className="size-8 rounded-lg bg-[#F2F2F2] flex items-center justify-center text-primary">
<div className="size-6 sm:size-7 lg:size-8 rounded-md sm:rounded-lg bg-[#F2F2F2] flex items-center justify-center text-primary text-xs sm:text-sm font-medium">
10
</div>
</div>
<Button
className="bg-white shadow h-8 sm:h-10 w-full sm:w-auto"
className="bg-white shadow h-8 sm:h-9 lg:h-10 w-auto px-2 sm:px-3 lg:px-4 flex-shrink-0"
>
<div className="flex items-center gap-2">
<Trash size={16} color="#AD3434" className="sm:w-5 sm:h-5" />
<div className="text-xs sm:text-sm text-[#AD3434] font-light">حذف همه از سبد خرید</div>
<div className="flex items-center gap-1 sm:gap-1.5 lg:gap-2">
<Trash size={12} color="#AD3434" className="sm:w-4 sm:h-4 lg:w-5 lg:h-5" />
<div className="text-xs sm:text-sm text-[#AD3434] font-light hidden sm:block">حذف همه از سبد خرید</div>
<div className="text-xs text-[#AD3434] font-light sm:hidden">حذف همه</div>
</div>
</Button>
</div>
<div className="mt-4 sm:mt-6 flex flex-col lg:flex-row gap-4 sm:gap-6">
<div className="flex-1 border border-border p-3 sm:p-5 rounded-xl sm:rounded-2xl">
<div className="mt-4 sm:mt-5 lg:mt-6 flex flex-col lg:flex-row gap-3 sm:gap-4 lg:gap-6">
<div className="flex-1 border border-border rounded-lg sm:rounded-xl lg:rounded-2xl overflow-hidden">
<CartItem noBorder />
<CartItem />
</div>
@@ -40,7 +41,7 @@ const Cart: NextPage = () => {
total={80580000}
confirmHref="/cart/shipping"
confirmLabel="ادامه به آدرس و ارسال"
className="w-full lg:w-[360px]"
className="w-full lg:w-[360px] xl:w-[400px]"
/>
</div>
</div>
src/app/cart/payment/page.tsx
+7 -5
View File
@@ -7,17 +7,17 @@ import DiscountCard from '../components/DiscountCard'
const CartPayment: NextPage = () => {
return (
<div className="mt-14 px-20">
<div className="mt-14 px-4 sm:px-8 lg:px-20">
<div className="mt-6 flex gap-6">
<div className="mt-6 flex flex-col lg:flex-row gap-6">
<div className='flex-1'>
<TitleBack title='پرداخت' />
<DiscountCard
/>
<div className='mt-5 border border-border rounded-2xl p-6 font-light'>
<div className='mt-5 border border-border rounded-2xl p-4 sm:p-6 font-light'>
<div>انتخاب روش پرداخت</div>
<div className='mt-10 text-[#333333] font-light'>
<div className='mt-6 sm:mt-10 text-[#333333] font-light'>
<RadioGroup defaultValue="option-one">
<div className="flex items-center gap-2">
<RadioGroupItem value="option-one" id="option-one" />
@@ -31,6 +31,7 @@ const CartPayment: NextPage = () => {
</div>
</div>
</div>
<div className="w-full lg:w-[360px] lg:flex-shrink-0">
<CartSummary
itemsCount={3}
itemsPrice={580000}
@@ -38,10 +39,11 @@ const CartPayment: NextPage = () => {
total={80580000}
confirmHref="/cart/payment"
confirmLabel="پرداخت"
className="w-[360px]"
className="w-full"
/>
</div>
</div>
</div>
)
}
src/app/cart/shipping/page.tsx
+10 -8
View File
@@ -7,14 +7,14 @@ import { Location } from 'iconsax-react'
const CartShipping: NextPage = () => {
return (
<div className="mt-14 px-20">
<div className="mt-14 px-4 sm:px-6 lg:px-20">
<div className="mt-6 flex gap-6">
<div className="mt-6 flex flex-col lg:flex-row gap-6">
<div className='flex-1'>
<TitleBack title='آدرس و تایید جزئیات' />
<div className='mt-5 border border-border rounded-2xl p-6 flex justify-between items-center'>
<div className='flex gap-2 items-center'>
<Location size={20} color='#333333' className='min-w-5' />
<div className='mt-5 border border-border rounded-2xl p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4'>
<div className='flex gap-2 items-start sm:items-center'>
<Location size={20} color='#333333' className='min-w-5 mt-1 sm:mt-0' />
<div className='text-xs text-[#7F7F7F]'>
<div>
آدرس تحویل سفارش
@@ -25,13 +25,14 @@ const CartShipping: NextPage = () => {
<div className='mt-2'>حمید ضرغامی</div>
</div>
</div>
<div className='text-primary text-sm'>ویرایش</div>
<div className='text-primary text-sm self-end sm:self-auto'>ویرایش</div>
</div>
<div className="flex-1 mt-5 border border-border p-5 rounded-2xl">
<div className="flex-1 mt-5 border border-border p-4 sm:p-5 rounded-2xl">
<CartItem noBorder />
<CartItem />
</div>
</div>
<div className="w-full lg:w-[360px] lg:flex-shrink-0">
<CartSummary
itemsCount={3}
itemsPrice={580000}
@@ -39,10 +40,11 @@ const CartShipping: NextPage = () => {
total={80580000}
confirmHref="/cart/payment"
confirmLabel="پرداخت"
className="w-[360px]"
className="w-full"
/>
</div>
</div>
</div>
)
}
src/app/contact/page.tsx
+24 -24
View File
@@ -9,31 +9,31 @@ import { Call, Location, Sms } from 'iconsax-react'
const ContactPage: NextPage = () => {
return (
<Layout>
<div className='mt-14 px-20'>
<div className='flex gap-24'>
<div className='mt-14 px-4 sm:px-8 lg:px-20'>
<div className='flex flex-col lg:flex-row gap-8 lg:gap-24'>
<div className='flex-1'>
<h1 className='font-black text-2xl'>ارتباط با ما</h1>
<p className='text-[#7F7F7F] mt-3 font-light'>اطلاعات تماس و متن پیام خود را وارد کنید</p>
<h1 className='font-black text-xl sm:text-2xl'>ارتباط با ما</h1>
<p className='text-[#7F7F7F] mt-3 font-light text-sm sm:text-base'>اطلاعات تماس و متن پیام خود را وارد کنید</p>
<div className='mt-12'>
<div className='mt-8 sm:mt-12'>
<Input
placeholder='نام و نام خانوادگی'
/>
<Input
placeholder='شماره تماس'
className='mt-6'
className='mt-4 sm:mt-6'
/>
<Input
placeholder='ایمیل'
className='mt-6'
className='mt-4 sm:mt-6'
/>
<Textarea
placeholder='متن پیام'
className='mt-6 h-[120px]'
className='mt-4 sm:mt-6 h-[100px] sm:h-[120px]'
/>
<Button className='mt-6 w-full'>ارسال پیام</Button>
<Button className='mt-4 sm:mt-6 w-full'>ارسال پیام</Button>
</div>
</div>
@@ -43,40 +43,40 @@ const ContactPage: NextPage = () => {
alt='contact'
width={500}
height={500}
className='w-full h-[450px] object-contain'
className='w-full h-[300px] sm:h-[400px] lg:h-[450px] object-contain'
/>
</div>
</div>
<div className='mt-20'>
<div className='flex flex-col gap-6'>
<div className='mt-12 sm:mt-16 lg:mt-20'>
<div className='flex flex-col gap-4 sm:gap-6'>
<div className='flex items-center gap-3 text-[#7F7F7F]'>
<div className='bg-blue-500 w-10 h-10 rounded-full flex items-center justify-center'>
<Call size={20} color='white' />
<div className='bg-blue-500 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center flex-shrink-0'>
<Call size={16} className='sm:w-5 sm:h-5' color='white' />
</div>
<div>
<div className='font-medium'>تلفن:</div>
<span className='text-black font-semibold text-lg'>67341</span>
<div className='font-medium text-sm sm:text-base'>تلفن:</div>
<span className='text-black font-semibold text-base sm:text-lg'>67341</span>
</div>
</div>
<div className='flex items-center gap-3 text-[#7F7F7F]'>
<div className='bg-green-500 w-10 h-10 rounded-full flex items-center justify-center'>
<Sms size={20} color='white' />
<div className='bg-green-500 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center flex-shrink-0'>
<Sms size={16} className='sm:w-5 sm:h-5' color='white' />
</div>
<div>
<div className='font-medium'>کدپستی:</div>
<span className='text-black font-semibold text-lg'>1136834843</span>
<div className='font-medium text-sm sm:text-base'>کدپستی:</div>
<span className='text-black font-semibold text-base sm:text-lg'>1136834843</span>
</div>
</div>
<div className='flex items-start gap-3 text-[#7F7F7F]'>
<div className='bg-red-500 w-10 h-10 rounded-full flex items-center justify-center mt-1'>
<Location size={20} color='white' />
<div className='bg-red-500 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center mt-1 flex-shrink-0'>
<Location size={16} className='sm:w-5 sm:h-5' color='white' />
</div>
<div>
<div className='font-medium'>دفتر مرکزی:</div>
<span className='text-black font-semibold text-sm leading-relaxed'>تهران، میدان امام خمینی، خیابان فردوسی، خیابان سرهنگ سخائی نبش کوچه بهنیا، پلاک 40، طبقه چهارم، واحد 12</span>
<div className='font-medium text-sm sm:text-base'>دفتر مرکزی:</div>
<span className='text-black font-semibold text-xs sm:text-sm leading-relaxed'>تهران، میدان امام خمینی، خیابان فردوسی، خیابان سرهنگ سخائی نبش کوچه بهنیا، پلاک 40، طبقه چهارم، واحد 12</span>
</div>
</div>
</div>
src/app/faq/page.tsx
+10 -10
View File
@@ -34,34 +34,34 @@ const FaqPage: NextPage = () => {
return (
<Layout>
<div className="min-h-screen bg-white py-12 px-20">
<div className="min-h-screen bg-white py-6 px-4 sm:py-8 sm:px-6 md:py-12 md:px-8 lg:px-20">
<div className="">
{/* Header Section */}
<div className=" mb-12">
<h1 className="text-xl font-bold text-gray-800 mb-2">
<div className="mb-8 sm:mb-10 md:mb-12">
<h1 className="text-lg sm:text-xl md:text-2xl font-bold text-gray-800 mb-2 sm:mb-3">
سوالات متداول
</h1>
<p className="text-gray-600 text-base leading-relaxed mx-auto">
<p className="text-gray-600 text-sm sm:text-base leading-relaxed mx-auto max-w-3xl">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است
</p>
</div>
{/* FAQ Section */}
<div className="space-y-4 max-w-4xl mx-auto">
<div className="space-y-2 sm:space-y-4 max-w-4xl mx-auto">
<Accordion type="single" collapsible className="w-full">
{faqData.map((item, index) => (
<AccordionItem
key={index}
value={`item-${index}`}
className="bg-gray-50 mt-4 rounded-lg border-0"
className="bg-gray-50 mt-2 sm:mt-4 rounded-lg border-0"
>
<AccordionTrigger className="px-6 py-5 text-right hover:no-underline">
<span className="text-[#333333] font-light text-base">
<AccordionTrigger className="px-3 py-3 sm:px-6 sm:py-5 text-right hover:no-underline">
<span className="text-[#333333] font-light text-sm sm:text-base leading-relaxed">
{item.question}
</span>
</AccordionTrigger>
<AccordionContent className="px-6 pb-5">
<p className="text-[#5D5D5D] font-light leading-relaxed text-sm">
<AccordionContent className="px-3 pb-3 sm:px-6 sm:pb-5">
<p className="text-[#5D5D5D] font-light leading-relaxed text-xs sm:text-sm">
{item.answer}
</p>
</AccordionContent>
src/app/home/components/Carousel.tsx
+2 -6
View File
@@ -24,15 +24,11 @@ const Carousel: FC = () => {
const sliders = isMobile ? data?.results?.sliders?.mobile : data?.results?.sliders?.desktop
if (!sliders || sliders.length === 0) {
return (
<div className='mt-5 h-[200px] sm:h-[300px] md:h-[400px] bg-gray-200 rounded-lg flex items-center justify-center'>
<p className="text-gray-500">اسلایدری موجود نیست</p>
</div>
);
return null
}
return (
<div className='mt-5 relative' style={{ zIndex: 0 }}>
<div className='relative' style={{ zIndex: 0 }}>
<Swiper pagination={true} modules={[Pagination]} className="mySwiper pb-5" style={{ zIndex: 0, position: 'relative' }}>
{sliders.map((slider) => (
<SwiperSlide key={slider._id}>
src/app/product/[id]/page.tsx
+4 -2
View File
@@ -19,7 +19,7 @@ import Questions from '@/app/product/components/Questions'
const SingleProduct: NextPage = () => {
return (
<div className='mt-14 px-4 sm:px-8 md:px-20'>
<div className='mt-14 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20'>
<div className='flex flex-col sm:flex-row justify-between gap-4 sm:gap-0'>
<Breadcrumb aria-label="breadcrumb">
<BreadcrumbList className="text-sm text-muted-foreground">
@@ -40,8 +40,10 @@ const SingleProduct: NextPage = () => {
<div className='text-primary text-xs sm:text-sm'>فروشنده شوید</div>
</div>
<div className='flex flex-col lg:flex-row gap-4 sm:gap-6 mt-8 sm:mt-12 md:mt-14'>
<div className='flex flex-col xl:flex-row gap-4 sm:gap-6 mt-8 sm:mt-12 md:mt-14'>
<div className='xl:w-[325px] xl:shrink-0'>
<ShopInformation />
</div>
<div className='flex-1 flex flex-col gap-6'>
<div className='flex flex-col lg:flex-row gap-4 sm:gap-6'>
<ProductImage />
src/app/product/components/BaseInformation.tsx
+25 -19
View File
@@ -4,58 +4,64 @@ import { FC } from 'react'
const BaseInformation: FC = () => {
return (
<div className='flex-1'>
<h1 className='text-lg text-[#191919]'>
<h1 className='text-base sm:text-lg text-[#191919] leading-relaxed'>
گوشی موبایل سامسونگ مدل Galaxy S24 Ultra دو سیم کارت ظرفیت 1 ترابایت و رم 12 گیگابایت - ویتنام
</h1>
<p className='mt-6 text-[#B2B2B2] text-sm'>
<p className='mt-4 sm:mt-6 text-[#B2B2B2] text-xs sm: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'>
<div className='mt-4 flex flex-wrap gap-2 sm:gap-4 items-center'>
<h3 className='text-primary text-sm sm:text-base'>
سامسونگ
</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>
<Star1 size={16} color='#FFC107' variant='Bold' className='sm:w-5 sm:h-5' />
<span className='text-xs sm:text-sm'>3.5</span>
</div>
<div className='size-1.5 rounded-full bg-[#E5E5E5]'></div>
<div className='text-primary'>
<div className='text-primary text-xs sm:text-sm'>
8 دیدگاه
</div>
</div>
<div className='mt-6 text-[#333333]'>
<div className='mt-4 sm:mt-6 text-[#333333] text-sm sm:text-base'>
رنگ : طلایی
</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 className='size-6 sm:size-8 rounded-full bg-red-200'></div>
<div className='size-6 sm:size-8 rounded-full bg-blue-200'></div>
<div className='size-6 sm:size-8 rounded-full bg-yellow-200'></div>
</div>
<div className='mt-7 text-lg text-[#333333]'>
<div className='mt-6 sm:mt-7 text-base sm: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='mt-6 sm:mt-10 flex flex-col gap-4 sm:gap-8'>
<div className='flex flex-col sm:flex-row sm:gap-3 items-start sm:items-center text-xs sm:text-sm'>
<div className='flex items-center gap-2'>
<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='mt-1 sm:mt-0'>Dynamic LTPO AMOLED 2X</div>
</div>
<div className='flex flex-col sm:flex-row sm:gap-3 items-start sm:items-center text-xs sm:text-sm'>
<div className='flex items-center gap-2'>
<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='mt-1 sm:mt-0'>200 مگاپیکسل</div>
</div>
<div className='flex flex-col sm:flex-row sm:gap-3 items-start sm:items-center text-xs sm:text-sm'>
<div className='flex items-center gap-2'>
<div className='size-2 rounded-full bg-[#7F7F7F]'></div>
<div className='text-[#7F7F7F]'>نسخه سیستم عامل :</div>
<div>Android 14</div>
</div>
<div className='mt-1 sm:mt-0'>Android 14</div>
</div>
</div>
</div>
src/app/product/components/Description.tsx
+4 -4
View File
@@ -8,14 +8,14 @@ const DESCRIPTION: string[] = [
const Description: FC = () => {
return (
<div className="mt-16 w-full">
<div className="mt-12 sm:mt-16 w-full">
<div className="flex items-center justify-end gap-3 flex-row-reverse">
<h2 className="text-primary text-lg">توضیحات</h2>
<h2 className="text-primary text-base sm:text-lg">توضیحات</h2>
<div className="w-1 h-6 bg-primary rounded"></div>
</div>
<div className="mt-6 rounded-xl bg-white p-6 max-h-[420px] overflow-y-auto">
<div className="text-sm text-[#333333] leading-8 text-justify space-y-4">
<div className="mt-4 sm:mt-6 rounded-xl bg-white p-4 sm:p-6 max-h-[300px] sm:max-h-[420px] overflow-y-auto">
<div className="text-xs sm:text-sm text-[#333333] leading-6 sm:leading-8 text-justify space-y-3 sm:space-y-4">
{DESCRIPTION.map((paragraph) => (
<p key={paragraph}>{paragraph}</p>
))}
src/app/product/components/ProductImage.tsx
+8 -8
View File
@@ -4,22 +4,22 @@ 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'>
<div className='w-full max-w-[380px] mx-auto lg:mx-0'>
<div className='w-full border border-border rounded-xl h-[300px] sm:h-[350px] md: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'
className='max-w-[200px] max-h-[200px] sm:max-w-[240px] sm: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 className='flex gap-2 sm:gap-3 mt-4 justify-center lg:justify-start overflow-x-auto'>
<div className='size-16 sm:size-20 border border-border rounded-xl shrink-0'></div>
<div className='size-16 sm:size-20 border border-border rounded-xl shrink-0'></div>
<div className='size-16 sm:size-20 border border-border rounded-xl shrink-0'></div>
<div className='size-16 sm:size-20 border border-border rounded-xl shrink-0'></div>
</div>
</div>
)
src/app/product/components/ProsCons.tsx
+11 -11
View File
@@ -16,20 +16,20 @@ const CONS: string[] = [
const ProsCons: FC = () => {
return (
<div className="mt-16 w-full">
<div className="mt-12 sm:mt-16 w-full">
<div className="flex items-center justify-end gap-3 flex-row-reverse">
<h2 className="text-primary text-lg">نقاط مثبت و منفی</h2>
<h2 className="text-primary text-base sm:text-lg">نقاط مثبت و منفی</h2>
<div className="w-1 h-6 bg-primary rounded"></div>
</div>
<div className="mt-6 rounded-xl bg-white">
<div className="grid grid-cols-12 items-start px-6 py-5">
<div className="mt-4 sm:mt-6 rounded-xl bg-white">
<div className="grid grid-cols-12 items-start px-4 sm:px-6 py-4 sm: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">نقاط مثبت</span>
<span className="text-xs sm:text-sm">نقاط مثبت</span>
<span className="size-1.5 rounded-full bg-[#7F7F7F]"></span>
</div>
<div className="col-span-12 md:col-span-9">
<div className="flex flex-col gap-3 text-sm text-[#333333] text-center md:text-center">
<div className="col-span-12 md:col-span-9 mt-2 md:mt-0">
<div className="flex flex-col gap-2 sm:gap-3 text-xs sm:text-sm text-[#333333] text-right">
{PROS.map((v) => (
<div key={v}>{v}</div>
))}
@@ -39,13 +39,13 @@ const ProsCons: FC = () => {
<Separator />
<div className="grid grid-cols-12 items-start px-6 py-5">
<div className="grid grid-cols-12 items-start px-4 sm:px-6 py-4 sm: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">نقاط منفی</span>
<span className="text-xs sm:text-sm">نقاط منفی</span>
<span className="size-1.5 rounded-full bg-[#7F7F7F]"></span>
</div>
<div className="col-span-12 md:col-span-9">
<div className="flex flex-col gap-3 text-sm text-[#333333] text-center md:text-center">
<div className="col-span-12 md:col-span-9 mt-2 md:mt-0">
<div className="flex flex-col gap-2 sm:gap-3 text-xs sm:text-sm text-[#333333] text-right">
{CONS.map((v) => (
<div key={v}>{v}</div>
))}
src/app/product/components/Questions.tsx
+20 -20
View File
@@ -49,17 +49,17 @@ const Questions: FC = () => {
}, [sort])
return (
<div className="mt-16 w-full">
<div className="mt-12 sm:mt-16 w-full">
<div className="flex items-center justify-end gap-3 flex-row-reverse">
<h2 className="text-primary text-lg">پرسش‌ها</h2>
<h2 className="text-primary text-base sm:text-lg">پرسش‌ها</h2>
<div className="w-1 h-6 bg-primary rounded" />
</div>
<div className="mt-6 grid grid-cols-12 gap-6">
<div className="mt-4 sm:mt-6 grid grid-cols-12 gap-4 sm:gap-6">
<div className="col-span-12 md:col-span-9 md:order-last">
<div className="flex items-center justify-end gap-4 text-sm text-[#7F7F7F] flex-row-reverse">
<div className="flex flex-col sm:flex-row sm:items-center justify-end gap-2 sm:gap-4 text-xs sm:text-sm text-[#7F7F7F]">
<span>مرتب سازی بر اساس:</span>
<div className="flex items-center gap-6">
<div className="flex items-center gap-4 sm:gap-6">
<button
type="button"
onClick={() => setSort('new')}
@@ -79,17 +79,17 @@ const Questions: FC = () => {
</div>
</div>
<div className="mt-6 rounded-xl bg-white divide-y divide-[#E6E6E6]">
<div className="mt-4 sm:mt-6 rounded-xl bg-white divide-y divide-[#E6E6E6]">
{sorted.map((q) => (
<Fragment key={q.id}>
<div className="px-6 py-5">
<div className="flex items-start gap-3">
<div className="px-4 sm:px-6 py-4 sm:py-5">
<div className="flex items-start gap-2 sm:gap-3">
<div className="shrink-0 mt-0.5">
<div className="size-8 rounded-full border border-[#DDE9FF] bg-[#F6FAFF] flex items-center justify-center">
<MessageQuestion size={18} color="#2F80ED" />
<div className="size-6 sm:size-8 rounded-full border border-[#DDE9FF] bg-[#F6FAFF] flex items-center justify-center">
<MessageQuestion size={14} color="#2F80ED" className="sm:w-[18px] sm:h-[18px]" />
</div>
</div>
<div className="text-[#333333] text-sm leading-7 text-right flex-1">
<div className="text-[#333333] text-xs sm:text-sm leading-6 sm:leading-7 text-right flex-1">
{q.text}
</div>
</div>
@@ -99,11 +99,11 @@ const Questions: FC = () => {
)}
{q.answers.length > 0 && (
<div className="mt-4 text-[#7F7F7F]">
<div className="mt-3 sm:mt-4 text-[#7F7F7F]">
{(expandedId === q.id ? q.answers : q.answers.slice(0, 1)).map((a) => (
<div key={a.id} className='flex gap-2 items-center mt-2 first:mt-0'>
<div className="text-xs">پاسخ</div>
<div className="text-xs leading-7 text-right text-[#333333]">
<div key={a.id} className='flex gap-2 items-start mt-2 first:mt-0'>
<div className="text-xs shrink-0">پاسخ</div>
<div className="text-xs leading-6 sm:leading-7 text-right text-[#333333]">
{a.text}
</div>
</div>
@@ -116,7 +116,7 @@ const Questions: FC = () => {
className="mt-3 flex items-center gap-1 text-xs text-primary"
>
{expandedId === q.id ? 'بستن پاسخ‌ها' : 'مشاهده پاسخ های دیگر'}
<ArrowDown2 size={14} color="blue" className={expandedId === q.id ? 'rotate-180 transition' : 'transition'} />
<ArrowDown2 size={12} color="blue" className={expandedId === q.id ? 'rotate-180 transition' : 'transition sm:w-[14px] sm:h-[14px]'} />
</button>
)}
</div>
@@ -129,12 +129,12 @@ const Questions: FC = () => {
</div>
<div className="col-span-12 md:col-span-3 order-first md:order-first">
<div className=" rounded-[10px] p-6 h-fit md:sticky md:top-[170px]">
<div className="text-primary text-sm">پرسش‌ها</div>
<div className="mt-4 text-xs text-[#7F7F7F] leading-6 text-justify">
<div className="rounded-[10px] p-4 sm:p-6 h-fit md:sticky md:top-[170px]">
<div className="text-primary text-xs sm:text-sm">پرسش‌ها</div>
<div className="mt-3 sm:mt-4 text-xs text-[#7F7F7F] leading-5 sm:leading-6 text-justify">
شما هم درباره این کالا پرسش خود را ثبت کنید
</div>
<Button className="w-full mt-5">ثبت پرسش</Button>
<Button className="w-full mt-4 sm:mt-5 text-xs sm:text-sm">ثبت پرسش</Button>
</div>
</div>
</div>
src/app/product/components/Reviews.tsx
+19 -19
View File
@@ -64,17 +64,17 @@ const Reviews: FC = () => {
}, [])
return (
<div className="mt-16 w-full">
<div className="mt-12 sm:mt-16 w-full">
<div className="flex items-center justify-end gap-3 flex-row-reverse">
<h2 className="text-primary text-lg">نظرات خریداران</h2>
<h2 className="text-primary text-base sm:text-lg">نظرات خریداران</h2>
<div className="w-1 h-6 bg-primary rounded"></div>
</div>
<div className="mt-6 grid grid-cols-12 gap-6">
<div className="mt-4 sm:mt-6 grid grid-cols-12 gap-4 sm:gap-6">
<div className="col-span-12 md:col-span-9 md:order-last">
<div className="flex items-center justify-start gap-4 text-sm text-[#7F7F7F]">
<div className="flex flex-col sm:flex-row sm:items-center justify-start gap-2 sm:gap-4 text-xs sm:text-sm text-[#7F7F7F]">
<span>مرتب سازی بر اساس:</span>
<div className="flex items-center gap-6">
<div className="flex items-center gap-4 sm:gap-6">
<button
type="button"
onClick={() => setSort('new')}
@@ -96,12 +96,12 @@ const Reviews: FC = () => {
</div>
</div>
<div className="mt-6 rounded-xl bg-white">
<div className="mt-4 sm:mt-6 rounded-xl bg-white">
{sortedReviews.map((r, idx) => (
<div key={r.id} className="px-6 py-5">
<div className="flex items-center justify-start gap-3">
<div className="px-2 py-0.5 rounded-full bg-[#02A55A] text-white text-xs">{r.rating}</div>
<div className="flex items-center gap-2 text-xs text-[#999999]">
<div key={r.id} className="px-4 sm:px-6 py-4 sm:py-5">
<div className="flex flex-col sm:flex-row sm:items-center justify-start gap-2 sm:gap-3">
<div className="px-2 py-0.5 rounded-full bg-[#02A55A] text-white text-xs w-fit">{r.rating}</div>
<div className="flex flex-wrap items-center gap-1 sm:gap-2 text-xs text-[#999999]">
{r.isBuyer && (
<span className="px-2 py-0.5 rounded bg-[#F1F1F1] text-[#7F7F7F]">خریدار</span>
)}
@@ -112,28 +112,28 @@ const Reviews: FC = () => {
</div>
</div>
<div className="mt-3 text-[#333333] text-sm leading-7 text-right">{r.text}</div>
<div className="mt-3 text-[#333333] text-xs sm:text-sm leading-6 sm:leading-7 text-right">{r.text}</div>
{idx !== sortedReviews.length - 1 && <div className="mt-5"> <Separator /> </div>}
{idx !== sortedReviews.length - 1 && <div className="mt-4 sm:mt-5"> <Separator /> </div>}
</div>
))}
</div>
</div>
<div className="col-span-12 md:col-span-3 order-first md:order-first">
<div className=" rounded-[10px] p-6 h-fit md:sticky md:top-[170px]">
<div className="text-primary text-sm">نظرات خریداران</div>
<div className="mt-4 flex items-center justify-end gap-2">
<Star1 size={18} color="#FFC107" variant="Bold" />
<div className="text-sm">
<div className="rounded-[10px] p-4 sm:p-6 h-fit md:sticky md:top-[170px]">
<div className="text-primary text-xs sm:text-sm">نظرات خریداران</div>
<div className="mt-3 sm:mt-4 flex items-center justify-end gap-2">
<Star1 size={16} color="#FFC107" variant="Bold" className="sm:w-[18px] sm:h-[18px]" />
<div className="text-xs sm:text-sm">
<span className="font-medium">{average}</span>
<span className="text-[#7F7F7F]"> / 5</span>
</div>
</div>
<div className="mt-4 text-xs text-[#7F7F7F] leading-6 text-justify">
<div className="mt-3 sm:mt-4 text-xs text-[#7F7F7F] leading-5 sm:leading-6 text-justify">
شما هم درباره این کالا نظر خود را ثبت کنید. نظر شما پس از بررسی و تایید نمایش داده می‌شود.
</div>
<Button className="w-full mt-5">ثبت دیدگاه</Button>
<Button className="w-full mt-4 sm:mt-5 text-xs sm:text-sm">ثبت دیدگاه</Button>
</div>
</div>
</div>
src/app/product/components/ShopInformation.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import React from 'react'
const ShopInformation = () => {
return (
<div className='w-[325px] bg-[#FAFAFA] rounded-[10px] p-7 border border-border h-fit sticky top-[170px] self-start'>
<div className='w-full xl:w-[325px] bg-[#FAFAFA] rounded-[10px] p-4 sm:p-6 lg:p-7 border border-border h-fit xl:sticky xl:top-[170px] xl:self-start'>
<div className='text-lg text-[#191919]'>
فروشنده
</div>
src/app/product/components/Specifications.tsx
+8 -8
View File
@@ -25,29 +25,29 @@ const SPEC_ITEMS: SpecItem[] = [
const Specifications: FC = () => {
return (
<div className="mt-16 w-full">
<div className="mt-12 sm:mt-16 w-full">
<div className="flex items-center justify-end gap-3 flex-row-reverse">
<h2 className="text-primary text-lg">مشخصات</h2>
<h2 className="text-primary text-base sm:text-lg">مشخصات</h2>
<div className="w-1 h-6 bg-primary rounded"></div>
</div>
<div className="mt-6 rounded-xl bg-white">
<div className="mt-4 sm: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="grid grid-cols-12 items-start px-4 sm:px-6 py-4 sm: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="text-xs sm: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">
<div className="col-span-12 md:col-span-9 mt-2 md:mt-0">
{Array.isArray(item.value) ? (
<div className="flex flex-col gap-3 text-sm text-[#333333] text-center md:text-center">
<div className="flex flex-col gap-2 sm:gap-3 text-xs sm:text-sm text-[#333333] text-right">
{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 className="text-xs sm:text-sm text-[#333333] text-right">{item.value}</div>
)}
</div>
</div>
src/app/profile/comments/page.tsx
+20 -20
View File
@@ -5,78 +5,78 @@ import Image from 'next/image'
const Comments: NextPage = () => {
return (
<div className='p-6'>
<div className='p-3 sm:p-4 md:p-6'>
<Menu pageActive='comments' />
<div className='mt-14'>
<div className='flex gap-6 border-b border-border pb-6'>
<div className='mt-6 sm:mt-8 md:mt-10 lg:mt-14'>
<div className='flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-6 border-b border-border pb-4 sm:pb-6'>
<Image
src='https://picsum.photos/200/300'
alt='comment'
width={100}
height={100}
className='max-w-20 max-h-20 object-contain'
className='max-w-16 sm:max-w-20 max-h-16 sm:max-h-20 object-contain mx-auto sm:mx-0'
/>
<div className='flex-1'>
<div className='border-b border-border pb-4'>
<div>
<div className='border-b border-border pb-3 sm:pb-4'>
<div className='text-sm sm:text-base'>
نان بربری سنتی سبوس دار
</div>
<div className='mt-1.5 text-sm text-[#999999]'>
<div className='mt-1.5 text-xs sm:text-sm text-[#999999]'>
2 آذر 1401
</div>
</div>
<div className='mt-4 text-[#4C4C4C] text-sm'>
<div className='mt-3 sm:mt-4 text-[#4C4C4C] text-xs sm:text-sm'>
خیلی راضیم از خریدم
</div>
</div>
</div>
<div className='flex gap-6 border-b border-border py-6'>
<div className='flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-6 border-b border-border py-4 sm:py-6'>
<Image
src='https://picsum.photos/200/300'
alt='comment'
width={100}
height={100}
className='max-w-20 max-h-20 object-contain'
className='max-w-16 sm:max-w-20 max-h-16 sm:max-h-20 object-contain mx-auto sm:mx-0'
/>
<div className='flex-1'>
<div className='border-b border-border pb-4'>
<div>
<div className='border-b border-border pb-3 sm:pb-4'>
<div className='text-sm sm:text-base'>
نان بربری سنتی سبوس دار
</div>
<div className='mt-1.5 text-sm text-[#999999]'>
<div className='mt-1.5 text-xs sm:text-sm text-[#999999]'>
2 آذر 1401
</div>
</div>
<div className='mt-4 text-[#4C4C4C] text-sm'>
<div className='mt-3 sm:mt-4 text-[#4C4C4C] text-xs sm:text-sm'>
خیلی راضیم از خریدم
</div>
</div>
</div>
<div className='flex gap-6 border-b border-border py-6'>
<div className='flex flex-col sm:flex-row gap-3 sm:gap-4 lg:gap-6 border-b border-border py-4 sm:py-6'>
<Image
src='https://picsum.photos/200/300'
alt='comment'
width={100}
height={100}
className='max-w-20 max-h-20 object-contain'
className='max-w-16 sm:max-w-20 max-h-16 sm:max-h-20 object-contain mx-auto sm:mx-0'
/>
<div className='flex-1'>
<div className='border-b border-border pb-4'>
<div>
<div className='border-b border-border pb-3 sm:pb-4'>
<div className='text-sm sm:text-base'>
نان بربری سنتی سبوس دار
</div>
<div className='mt-1.5 text-sm text-[#999999]'>
<div className='mt-1.5 text-xs sm:text-sm text-[#999999]'>
2 آذر 1401
</div>
</div>
<div className='mt-4 text-[#4C4C4C] text-sm'>
<div className='mt-3 sm:mt-4 text-[#4C4C4C] text-xs sm:text-sm'>
خیلی راضیم از خریدم
</div>
</div>
src/app/profile/components/Menu.tsx
+30 -4
View File
@@ -11,8 +11,33 @@ const Menu: FC<Props> = (props) => {
const { pageActive } = props
return (
<div className='h-20 flex justify-between items-center bg-[#FAFAFA] rounded-[10px] border border-border px-10'>
<div className='flex gap-10'>
<div className='bg-[#FAFAFA] rounded-[10px] border border-border'>
{/* Mobile Layout */}
<div className='block sm:hidden'>
<div className='flex overflow-x-auto scrollbar-hide p-3'>
<div className='flex gap-2 min-w-max'>
<MenuItem href='/profile' icon='user' text='پروفایل کاربری' isActive={pageActive === 'profile'} />
<MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={pageActive === 'favorite'} />
<MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={pageActive === 'comments'} />
<MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={pageActive === 'chat'} />
<MenuItem href='/profile/orders' icon='orders' text='سفارشات' isActive={pageActive === 'orders'} />
{/* Logout Button in Mobile */}
<div className='flex-shrink-0 ml-2'>
<Button className='bg-[#F2F2F2] h-12 px-3'>
<div className='flex items-center gap-2 text-[#AD3434]'>
<LogoutCurve className='size-4' color='#AD3434' />
<div className='text-xs font-light'>خروج</div>
</div>
</Button>
</div>
</div>
</div>
</div>
{/* Desktop Layout */}
<div className='hidden sm:flex h-20 justify-between items-center px-6 lg:px-10'>
<div className='flex gap-4 lg:gap-6 xl:gap-10'>
<MenuItem href='/profile' icon='user' text='پروفایل کاربری' isActive={pageActive === 'profile'} />
<MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={pageActive === 'favorite'} />
<MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={pageActive === 'comments'} />
@@ -21,12 +46,13 @@ const Menu: FC<Props> = (props) => {
</div>
<Button className='bg-[#F2F2F2] h-12'>
<div className='flex itesm-center gap-2 text-[#AD3434]'>
<LogoutCurve className='min-size-5 size-5' color='#AD3434' />
<div className='flex items-center gap-2 text-[#AD3434]'>
<LogoutCurve className='size-5' color='#AD3434' />
<div className='text-sm font-light'>خروج از حساب</div>
</div>
</Button>
</div>
</div>
)
}
src/app/profile/components/MenuItem.tsx
+2 -2
View File
@@ -34,12 +34,12 @@ const MenuItem: FC<Props> = (props) => {
return (
<Link href={href} className={clx(
'h-full min-h-20 w-fit px-2 border-b border-primary flex items-center gap-4',
'h-12 sm:h-16 lg:h-20 w-fit px-2 sm:px-3 lg:px-4 border-b-2 border-primary flex items-center gap-2 sm:gap-3 lg:gap-4 whitespace-nowrap flex-shrink-0',
isActive ? 'border-b-primary' : 'border-b-transparent'
)}>
<Icon />
<div className={clx(
'text-sm',
'text-xs sm:text-sm',
isActive ? 'text-primary' : 'text-[#7F7F7F]'
)}>
{text}
src/app/profile/favorite/page.tsx
+2 -2
View File
@@ -7,10 +7,10 @@ import ProductCard from "@/components/ProductCard"
const FavoritePage: NextPage = () => {
return (
<div className="p-6">
<div className="p-3 sm:p-4 md:p-6">
<Menu pageActive='favorite' />
<GridWrapper desktop={5} mobile={2} className="mt-14">
<GridWrapper desktop={5} mobile={2} className="mt-6 sm:mt-8 md:mt-10 lg:mt-14">
<ProductCard />
<ProductCard />
<ProductCard />
src/app/profile/orders/page.tsx
+24 -27
View File
@@ -51,23 +51,23 @@ const Orders: NextPage = () => {
]
return (
<div className='p-6'>
<div className='p-3 sm:p-4 md:p-6'>
<Menu pageActive='orders' />
{/* Tabs */}
<div className='mt-14 border-b border-gray-200'>
<div className='flex gap-8'>
<div className='mt-6 sm:mt-8 md:mt-10 lg:mt-14 border-b border-gray-200'>
<div className='flex gap-2 sm:gap-4 lg:gap-8 overflow-x-auto'>
{tabs.map((tab) => (
<button
key={tab.key}
onClick={() => setActiveTab(tab.key)}
className={`pb-4 px-2 border-b-2 transition-colors ${activeTab === tab.key
className={`pb-3 sm:pb-4 px-1 sm:px-2 border-b-2 transition-colors whitespace-nowrap ${activeTab === tab.key
? 'border-primary text-primary'
: 'border-transparent text-gray-600 hover:text-gray-800'
}`}
>
<span className='ml-2'>{tab.label}</span>
<span className={`inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs rounded-full ${activeTab === tab.key
<span className='ml-1 sm:ml-2 text-xs sm:text-sm'>{tab.label}</span>
<span className={`inline-flex items-center justify-center min-w-[16px] sm:min-w-[20px] h-4 sm:h-5 px-1 sm:px-1.5 text-xs rounded-full ${activeTab === tab.key
? 'bg-primary text-white'
: 'bg-gray-200 text-gray-600'
}`}>
@@ -79,61 +79,58 @@ const Orders: NextPage = () => {
</div>
{/* Orders List */}
<div className='mt-6 space-y-4'>
<div className='mt-4 sm:mt-6 space-y-3 sm:space-y-4'>
{mockOrders.map((order) => (
<div key={order.id} className='bg-white border border-[#E0E0E0] rounded-[8px] p-5'>
<div className='flex gap-6'>
<div className='max-w-[234px]'>
<div key={order.id} className='bg-white border border-[#E0E0E0] rounded-[8px] p-3 sm:p-4 md:p-5'>
<div className='flex flex-col lg:flex-row gap-4 sm:gap-6'>
<div className='lg:max-w-[234px] w-full'>
<div className=''>
<div className='text-sm text-[#7F7F7F] mb-1'>
<div className='text-xs sm:text-sm text-[#7F7F7F] mb-1'>
شماره سفارش: <span className='text-black'> {order.id}</span>
</div>
<div className='text-sm text-[#7F7F7F] mt-4'>
<div className='text-xs sm:text-sm text-[#7F7F7F] mt-3 sm:mt-4'>
مبلغ: <span className='text-black'> {order.amount} تومان</span>
</div>
</div>
<div className='mb-6 mt-4'>
<div className='text-sm text-[#7F7F7F]'>
<div className='mb-4 sm:mb-6 mt-3 sm:mt-4'>
<div className='text-xs sm:text-sm text-[#7F7F7F]'>
وضعیت سفارش : <span className='text-black'>{order.status}</span>
</div>
<div className='text-sm text-[#7F7F7F] mt-4'>
<div className='text-xs sm:text-sm text-[#7F7F7F] mt-3 sm:mt-4'>
تاریخ ثبت سفارش: <span className='text-black'> {order.date}</span>
</div>
</div>
<div className='flex gap-3'>
<div className='flex flex-col sm:flex-row gap-2 sm:gap-3'>
<Button
variant="outline"
className='px-6 py-2 h-9 border-[#E0E0E0] text-[#666666] hover:bg-gray-50'
className='px-4 sm:px-6 py-2 h-8 sm:h-9 border-[#E0E0E0] text-[#666666] hover:bg-gray-50 text-xs sm:text-sm'
>
جزئیات سفارش
</Button>
<Button className='bg-primary hover:bg-primary/80 px-6 py-2 h-9 text-white'>
<Button className='bg-primary hover:bg-primary/80 px-4 sm:px-6 py-2 h-8 sm:h-9 text-white text-xs sm:text-sm'>
پرداخت
</Button>
</div>
</div>
<div className='flex-1 flex gap-4 border-r border-border pr-5 overflow-hidden min-h-[225px]'>
<div className='flex-1 flex gap-3 sm:gap-4 lg:border-r lg:border-border lg:pr-5 overflow-hidden min-h-[200px] sm:min-h-[225px]'>
<Swiper
spaceBetween={16}
spaceBetween={12}
slidesPerView={'auto'}
className='h-full w-full'
grabCursor={true}
>
{order.products.map((product) => (
<SwiperSlide key={product.id} className='!w-[234px]'>
<div className='flex w-[234px] h-[224px] flex-col p-7 items-center rounded-xl gap-2 border border-border'>
<Image src={product.image} className='max-w-[140px] max-h-[140px] object-center' alt={product.name} width={100} height={100} />
<div className='max-w-[200px] text-center text-sm font-light mt-4'>{product.name}</div>
<SwiperSlide key={product.id} className='!w-[180px] sm:!w-[200px] lg:!w-[234px]'>
<div className='flex w-[180px] sm:w-[200px] lg:w-[234px] h-[180px] sm:h-[200px] lg:h-[224px] flex-col p-4 sm:p-5 lg:p-7 items-center rounded-xl gap-2 border border-border'>
<Image src={product.image} className='max-w-[100px] sm:max-w-[120px] lg:max-w-[140px] max-h-[100px] sm:max-h-[120px] lg:max-h-[140px] object-center' alt={product.name} width={100} height={100} />
<div className='max-w-[160px] sm:max-w-[180px] lg:max-w-[200px] text-center text-xs sm:text-sm font-light mt-2 sm:mt-4'>{product.name}</div>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
</div>
</div>
src/app/profile/page.tsx
+19 -20
View File
@@ -36,22 +36,22 @@ const ProfilePage = () => {
}
return (
<div className="p-4 sm:p-6">
<div className="p-3 sm:p-4 md:p-6">
<Menu pageActive='profile' />
<div className='mt-6 sm:mt-8 md:mt-10'>
<div className="flex flex-col xl:flex-row gap-4 sm:gap-6">
<div className='mt-4 sm:mt-6 md:mt-8 lg:mt-10'>
<div className="flex flex-col lg:flex-row gap-4 sm:gap-6">
{/* Left Content - Form */}
<div className="flex-1 ">
<div className="bg-[#FAFAFA] rounded-lg p-4 sm:p-6">
<div className="flex-1">
<div className="bg-[#FAFAFA] rounded-lg p-3 sm:p-4 md:p-6">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4 sm:mb-6 gap-3 sm:gap-0">
<h1 className="text-base sm:text-lg font-bold text-gray-900">اطلاعات کاربری</h1>
<Button
onClick={() => setIsEditing(!isEditing)}
variant="outline"
className="flex items-center gap-2"
className="flex items-center gap-2 text-sm sm:text-base"
>
<Edit2 size={16} />
ویرایش
<span className="hidden sm:inline">ویرایش</span>
</Button>
</div>
@@ -134,13 +134,14 @@ const ProfilePage = () => {
<div className="mt-4 sm:mt-6 flex flex-col sm:flex-row gap-3">
<Button
onClick={handleSubmit}
className="px-8 bg-blue-600 hover:bg-blue-700"
className="px-6 sm:px-8 bg-blue-600 hover:bg-blue-700 text-sm sm:text-base"
>
ذخیره تغییرات
</Button>
<Button
onClick={() => setIsEditing(false)}
variant="outline"
className="text-sm sm:text-base"
>
انصراف
</Button>
@@ -149,30 +150,28 @@ const ProfilePage = () => {
</div>
</div>
<div className='flex flex-row xl:flex-col gap-4 sm:gap-6'>
<div className='w-full xl:w-[240px] xl:h-[240px] bg-[#FAFAFA] rounded-[10px] flex flex-col gap-4 sm:gap-6 justify-center items-center h-[120px] sm:h-[160px] xl:h-[240px]'>
<div className='size-12 sm:size-16 xl:size-20 bg-[#F2F2F2] rounded-full flex justify-center items-center'>
<ShoppingCart size={24} color='#000' className='sm:w-8 sm:h-8 xl:w-10 xl:h-10' />
{/* Quick Actions Cards */}
<div className='flex flex-row lg:flex-col gap-3 sm:gap-4 lg:gap-6 lg:min-w-[200px]'>
<div className='flex-1 lg:w-full bg-[#FAFAFA] rounded-[10px] flex flex-col gap-3 sm:gap-4 lg:gap-6 justify-center items-center h-[100px] sm:h-[120px] lg:h-[160px] xl:h-[200px]'>
<div className='size-10 sm:size-12 lg:size-16 xl:size-20 bg-[#F2F2F2] rounded-full flex justify-center items-center'>
<ShoppingCart size={20} color='#000' className='sm:w-6 sm:h-6 lg:w-8 lg:h-8 xl:w-10 xl:h-10' />
</div>
<div>
<div className='text-xs sm:text-sm lg:text-base text-center'>
سفارشات
</div>
</div>
<div className='w-full xl:w-[240px] xl:h-[240px] bg-[#FAFAFA] rounded-[10px] flex flex-col gap-4 sm:gap-6 justify-center items-center h-[120px] sm:h-[160px] xl:h-[240px]'>
<div className='size-12 sm:size-16 xl:size-20 bg-[#F2F2F2] rounded-full flex justify-center items-center'>
<Heart size={24} color='#000' className='sm:w-8 sm:h-8 xl:w-10 xl:h-10' />
<div className='flex-1 lg:w-full bg-[#FAFAFA] rounded-[10px] flex flex-col gap-3 sm:gap-4 lg:gap-6 justify-center items-center h-[100px] sm:h-[120px] lg:h-[160px] xl:h-[200px]'>
<div className='size-10 sm:size-12 lg:size-16 xl:size-20 bg-[#F2F2F2] rounded-full flex justify-center items-center'>
<Heart size={20} color='#000' className='sm:w-6 sm:h-6 lg:w-8 lg:h-8 xl:w-10 xl:h-10' />
</div>
<div>
<div className='text-xs sm:text-sm lg:text-base text-center'>
علاقه مندی ها
</div>
</div>
</div>
<div className='w-full xl:w-[300px] min-h-[200px] xl:min-h-full bg-red-50 rounded-[10px] hidden xl:block'>
</div>
</div>
</div>
</div >
)
}
src/components/CartControls.tsx
+9 -12
View File
@@ -21,41 +21,38 @@ export default function CartControls(props: CartControlsProps) {
const orange = "blue";
return (
<div className={"flex items-center gap-4 " + (className ?? "")}>
<div className="h-12 rounded-xl border border-border bg-white px-4 min-w-[138px] flex items-center justify-between">
<div className={"flex items-center gap-2 sm:gap-4 " + (className ?? "")}>
<div className="h-10 sm:h-12 rounded-lg sm:rounded-xl border border-border bg-white px-2 sm:px-4 min-w-[100px] sm:min-w-[138px] flex items-center justify-between">
<button
type="button"
onClick={() => canIncrement && onChange(quantity + 1)}
className="disabled:opacity-40 disabled:cursor-not-allowed"
className="disabled:opacity-40 disabled:cursor-not-allowed p-1"
disabled={!canIncrement}
aria-label="increase quantity"
>
<Add size={22} color={orange} />
<Add size={18} color={orange} className="sm:w-5 sm:h-5" />
</button>
<span className="text-[18px] font-medium" style={{ color: orange }}>
<span className="text-sm sm:text-[18px] font-medium" style={{ color: orange }}>
{quantity}
</span>
<button
type="button"
onClick={() => canDecrement && onChange(quantity - 1)}
className="disabled:opacity-40 disabled:cursor-not-allowed"
className="disabled:opacity-40 disabled:cursor-not-allowed p-1"
disabled={!canDecrement}
aria-label="decrease quantity"
>
<Minus size={22} color={orange} />
<Minus size={18} color={orange} className="sm:w-5 sm:h-5" />
</button>
</div>
<button
type="button"
onClick={onRemove}
className="h-12 w-12 rounded-xl border border-border grid place-items-center bg-white"
className="h-10 w-10 sm:h-12 sm:w-12 rounded-lg sm:rounded-xl border border-border grid place-items-center bg-white"
aria-label="remove from cart"
>
<Trash size={22} color="#AD3434" />
<Trash size={18} color="#AD3434" className="sm:w-5 sm:h-5" />
</button>
</div>
);
src/components/CartSummary.tsx
+9 -9
View File
@@ -22,8 +22,8 @@ const Row: FC<{ label: string; value: string | number; emphasize?: boolean }> =
) => {
return (
<div className="flex items-center justify-between text-[#333333]">
<div className="text-sm font-light">{label}</div>
<div className={emphasize ? "font-semibold" : "font-light"}>
<div className="text-xs sm:text-sm font-light">{label}</div>
<div className={`text-sm sm:text-base ${emphasize ? "font-semibold" : "font-light"}`}>
{typeof value === "number" ? NumberFormat(value) : value}
</div>
</div>
@@ -34,30 +34,30 @@ const CartSummary: FC<CartSummaryProps> = (props) => {
const { itemsCount, itemsPrice, discount, total, onConfirm, onDownloadInvoice, className, confirmHref, confirmLabel } = props;
return (
<div className={"rounded-2xl border border-border p-6 h-fit bg-[#FAFAFA] " + (className ?? "")}>
<div className={"rounded-xl sm:rounded-2xl border border-border p-4 sm:p-6 h-fit bg-[#FAFAFA] " + (className ?? "")}>
<div className="flex items-center justify-between">
<div className="text-sm text-muted-foreground">تعداد کالاها</div>
<div>{NumberFormat(itemsCount)} محصول</div>
<div className="text-xs sm:text-sm text-muted-foreground">تعداد کالاها</div>
<div className="text-sm sm:text-base font-medium">{NumberFormat(itemsCount)} محصول</div>
</div>
<div className="mt-6 space-y-5">
<div className="mt-4 sm:mt-6 space-y-3 sm:space-y-5">
<Row label="قیمت کالاها" value={itemsPrice} />
<Row label="تخفیف" value={discount} />
<Row label="جمع فاکتور" value={total} emphasize />
</div>
<div className="mt-8 space-y-3">
<div className="mt-6 sm:mt-8 space-y-2 sm:space-y-3">
<Button
type="button"
onClick={() => onDownloadInvoice?.()}
className="w-full h-12 rounded-xl bg-[#303030] text-white shadow hover:bg-[#303030]/90"
className="w-full h-10 sm:h-12 rounded-lg sm:rounded-xl bg-[#303030] text-white shadow hover:bg-[#303030]/90 text-sm sm:text-base"
>
دانلود پیش‌فاکتور
</Button>
<Button
type="button"
onClick={() => !confirmHref && onConfirm?.()}
className="w-full h-12 rounded-xl text-white"
className="w-full h-10 sm:h-12 rounded-lg sm:rounded-xl text-white text-sm sm:text-base"
>
{confirmHref ? (
<Link href={confirmHref} className="w-full h-full flex items-center justify-center">
src/share/Header.tsx
+1 -1
View File
@@ -103,7 +103,7 @@ const Header: FC = () => {
</div>
{/* فضای خالی برای جبران ارتفاع fixed header */}
<div className={`${isMobileMenuOpen ? 'h-[280px] sm:h-[260px] md:h-[140px]' : 'h-[100px] sm:h-[120px] md:h-[140px]'}`}></div>
<div className={`${isMobileMenuOpen ? 'h-[280px] sm:h-[260px] md:h-[120px]' : 'h-[120px] sm:h-[120px] md:h-[120px]'}`}></div>
</Fragment>
)
}