responsive base v1

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

@@ -19,8 +19,8 @@ import Questions from '@/app/product/components/Questions'
 
 const SingleProduct: NextPage = () => {
     return (
-        <div className='mt-14 px-20'>
-            <div className='flex justify-between'>
+        <div className='mt-14 px-4 sm:px-8 md: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">
                         <BreadcrumbItem>
@@ -37,13 +37,13 @@ const SingleProduct: NextPage = () => {
                     </BreadcrumbList>
                 </Breadcrumb>
 
-                <div className='text-primary text-sm'>فروشنده شوید</div>
+                <div className='text-primary text-xs sm:text-sm'>فروشنده شوید</div>
             </div>
 
-            <div className='flex gap-6 mt-14 flex-row-reverse'>
+            <div className='flex flex-col lg:flex-row gap-4 sm:gap-6 mt-8 sm:mt-12 md:mt-14'>
                 <ShopInformation />
                 <div className='flex-1 flex flex-col gap-6'>
-                    <div className='flex gap-6'>
+                    <div className='flex flex-col lg:flex-row gap-4 sm:gap-6'>
                         <ProductImage />
                         <BaseInformation />
                     </div>
@@ -61,9 +61,9 @@ const SingleProduct: NextPage = () => {
 }
 
 export default function SingleProductWithLayout() {
-  return (
-    <Layout>
-      <SingleProduct />
-    </Layout>
-  )
+    return (
+        <Layout>
+            <SingleProduct />
+        </Layout>
+    )
 }