responsive base v1

src/app/cart/page.tsx

@@ -7,10 +7,10 @@ import { NextPage } from "next"
 
 const Cart: NextPage = () => {
     return (
-        <div className="mt-14 px-20">
-            <div className="border-b border-border flex justify-between items-center">
-                <div className="flex items-center gap-3 pb-6 border-b-2 border-primary relative top-[1px]">
-                    <div>
+        <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>
                     <div className="size-8 rounded-lg bg-[#F2F2F2] flex items-center justify-center text-primary">
@@ -19,17 +19,17 @@ const Cart: NextPage = () => {
                 </div>
 
                 <Button
-                    className="bg-white shadow h-10"
+                    className="bg-white shadow h-8 sm:h-10 w-full sm:w-auto"
                 >
                     <div className="flex items-center gap-2">
-                        <Trash size={20} color="#AD3434" />
-                        <div className="text-sm text-[#AD3434] font-light">حذف همه از سبد خرید</div>
+                        <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>
                 </Button>
             </div>
 
-            <div className="mt-6 flex gap-6">
-                <div className="flex-1 border border-border p-5 rounded-2xl">
+            <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">
                     <CartItem noBorder />
                     <CartItem />
                 </div>
@@ -40,7 +40,7 @@ const Cart: NextPage = () => {
                     total={80580000}
                     confirmHref="/cart/shipping"
                     confirmLabel="ادامه به آدرس و ارسال"
-                    className="w-[360px]"
+                    className="w-full lg:w-[360px]"
                 />
             </div>
         </div>
@@ -48,9 +48,9 @@ const Cart: NextPage = () => {
 }
 
 export default function CartWithLayout() {
-  return (
-    <Layout>
-      <Cart />
-    </Layout>
-  )
+    return (
+        <Layout>
+            <Cart />
+        </Layout>
+    )
 }