reza finished lvl1 cart

src/assets/icons/delete.svg

@@ -0,0 +1,10 @@
+<svg id="vuesax_linear_trash" data-name="vuesax/linear/trash" xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31">
+  <g id="trash">
+    <path id="Vector" d="M23.25.646C18.949.22,14.622,0,10.307,0A76.3,76.3,0,0,0,2.635.388L0,.646" transform="translate(3.875 7.078)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M0,3.836.284,2.144C.491.917.646,0,2.829,0H6.213C8.4,0,8.564.969,8.757,2.157l.284,1.679" transform="translate(10.979 2.583)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M17.7,0l-.84,13.007c-.142,2.028-.258,3.6-3.862,3.6H4.7c-3.6,0-3.72-1.576-3.862-3.6L0,0" transform="translate(6.652 11.806)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-4" data-name="Vector" d="M0,0H4.3" transform="translate(13.343 21.313)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-5" data-name="Vector" d="M0,0H6.458" transform="translate(12.271 16.146)" fill="none" stroke="#b42626" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-6" data-name="Vector" d="M0,0H31V31H0Z" fill="none" opacity="0"/>
+  </g>
+</svg>

src/components/Button/index.js

@@ -13,7 +13,7 @@ export default function Button({
 }) {
   return (
     <button
-      className={`rounded-md py-3 justify-center text-sm ${
+      className={`rounded-md py-3 justify-center text-sm cursor-pointer ${
         selectable ? (active ? "bg-black" : backgroundColor) : backgroundColor
       } ${selectable ? (active ? "text-blueC0" : color) : color} ${
         selectable ? (active ? "bg-opacity-10" : bgOpacity) : bgOpacity

src/components/Checkbox/index.js

@@ -16,7 +16,7 @@ export default function Checkbox(props) {
       </svg>
 
       <div className="checkbox-container">
-        <input className="checkbox-input" id="apples" type="checkbox" checked={props.checked} />
+        <input className="checkbox-input" name={String("name")} id="apples" type="checkbox" checked={props.checked} />
         <label className="checkbox" htmlFor="apples">
           <span>
             <svg width="12px" height="10px">

src/components/Product/index.js

@@ -78,7 +78,7 @@ const ProductDesign = ({
                 <img
                   src={productImg}
                   alt=""
-                  className="h-full rounded-lg cursor-pointer py-8"
+                  className="h-full rounded-lg cursor-pointer py-5"
                   onMouseEnter={() => setIsHovering(true)}
                   onMouseLeave={() => setIsHovering(false)}
                 />
@@ -132,7 +132,7 @@ const ProductDesign = ({
           <div className="px-2">
             <div className="mt-4">
               <h2
-                className={`leading-4 text-xs ${productTitleColor} ${productTitleAlignment}`}
+                className={`leading-4 text-xs py-1 ${productTitleColor} ${productTitleAlignment}`}
               >
                 {productName}
               </h2>

src/views/Product/Desktop/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const DesktopProductLayout = () =>{
+    return (
+        <div className="w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3">
+            Desktop
+        </div>
+    );
+};
+
+export default DesktopProductLayout;

src/views/Product/index.js

@@ -8,8 +8,10 @@ import Button from "../../components/Button";
 import Header from "../../components/Header";
 import Comment from "./Comment";
 import Rate from "./Rate";
+import DesktopProductLayout from "./Desktop";
 
 export const Product = ({
+  isMobile,
   productType,
   getInfo,
   book,
@@ -21,14 +23,25 @@ export const Product = ({
   setHeaderOptions,
 }) => {
   const [type, setType] = useState("physical");
+  const [desktopContentTransform, setDesktopContentTransform] = useState(false);
 
   useEffect(() => {
     getInfo({ id: location.getId() });
     setHeaderOptions(headerOptions);
+    if (!isMobile) {
+      window.addEventListener("scroll", () => {
+        if (window.scrollY >= 64) {
+          setDesktopContentTransform(() => true);
+        } else {
+          setDesktopContentTransform(() => false);
+        }
+      });
+    }
   }, []);
   return (
     <>
       {/* Portrait */}
+      {isMobile ? (
       <div className="w-full flex flex-col bg-transparent px-4">
         <header
           className={`w-full flex ${
@@ -161,7 +174,7 @@ export const Product = ({
             <Comment key={index} />
           ))}
         </div>
-      </div>
+      </div>) : <DesktopProductLayout />}
     </>
   );
 };

src/views/Products/layouts/Main.js

@@ -55,13 +55,13 @@ export const Main = ({ isMobile,
       <ul className='flex justify-between w-3/4 px-4 py-0 '>
         {
           filteringNavItems.map(e => (
-            <li className='text-sm rounded py-2 px-6 transition-all	hover:bg-gray-300 hover:text-blueC0 cursor-pointer' onClick={() => console.log('a')}>{e.title}</li>
+            <li className='text-sm rounded py-2 px-6 transition-all	duration-700 hover:bg-gray-300 hover:text-blueC0 cursor-pointer' onClick={() => console.log('a')}>{e.title}</li>
           ))
         }
       </ul>
     </div>
     
-      <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-center">
+      <div className="w-full flex flex-row flex-wrap mt-0 border-t-2 border-solid border-gray-100 overflow-y-hidden justify-between">
         {selectedGrade
           ? gradeFilterBooks?.map((product, index) => (
             <Product

src/views/ShoppingCart/Product/index.js

@@ -5,6 +5,7 @@ import { userProduct } from "../../../redux/actions";
 // assets
 import bookImage from "../../../assets/images/zist-11.svg";
 import exitIcon from "../../../assets/icons/exit.svg";
+import deleteIcon from "../../../assets/icons/delete.svg";
 
 function Product({ product, grades, pushToCart, isMobile }) {
   return isMobile ? (
@@ -88,21 +89,25 @@ function Product({ product, grades, pushToCart, isMobile }) {
           src={"https://dnvn.ir/api/v1/file/" + product?.product?.book?.fileIds}
           className="rounded-md w-20"
         />
-        <div className="flex flex-col pr-4">
+        <div className="flex flex-col pr-4 pt-1">
-          <strong className="text-sm text-blue5F mb-1 dark:text-white">
+          <strong className="text-lg text-blue5F mb-1 dark:text-white font-semibold">
             {product?.product?.book?.name}
           </strong>
-          <span className="text-gray70 text-xs mb-1 dark:text-greenBA">
+          <div className="flex flex-row items-center mt-4">
-            {"پایه" + " " + grades[product?.product?.book?.gradeId]}
+            <span className="w-2 h-2 bg-greenBA rounded-md ml-1"></span>
-          </span>
+            <div className="text-gray70 text-sm dark:text-greenBA">
-          <span className="text-gray70 text-xs mb-1 dark:text-greenBA">
+              {"پایه" + " " + grades[product?.product?.book?.gradeId]}
-            {product?.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"}
+            </div>
-          </span>
+            <span className="w-2 h-2 bg-greenBA rounded-md mr-5 ml-1"></span>
+            <div className="text-gray70 text-sm dark:text-greenBA">
+              {product?.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"}
+            </div>
+          </div>
         </div>
       </div>
       <div className="w-1/4 flex flex-row items-center">
         <button
-          className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0"
+          className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-blueC0 text-blueC0 text-lg"
           onClick={() =>
             pushToCart({
               productId: product?.productId,
@@ -113,11 +118,11 @@ function Product({ product, grades, pushToCart, isMobile }) {
         >
           +
         </button>
-        <span className="mx-2.5 font-semibold text-md text-blueC0">
+        <span className="mx-2.5 font-semibold text-lg text-blueC0">
           {product.count}
         </span>
         <button
-          className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0"
+          className="rounded-md pt-2 pb-1.5 px-3 border border-solid border-grayDB text-grayDB dark:border-blueC0 dark:text-blueC0 text-lg"
           onClick={() =>
             pushToCart({
               productId: product?.productId,
@@ -129,10 +134,15 @@ function Product({ product, grades, pushToCart, isMobile }) {
           -
         </button>
       </div>
-      <div className="w-1/4 flex flex-row items-center">
+      <div className="w-1/4 flex flex-row items-center justify-end pl-4">
-        <strong className="font-bold text-md text-blue5F dark:text-white">
+        <strong className="font-semibold text-md text-blue5F dark:text-white">
-          {product?.product?.price}&nbsp;تومان
+          &nbsp;{product?.product?.price}&nbsp;&nbsp;تومان
         </strong>
+        <img
+          src={deleteIcon}
+          alt="delete"
+          className="border border-red-800 border-solid p-1 w-8 bg-red-100 rounded-md mr-4"
+        />
       </div>
     </div>
   );

src/views/ShoppingCart/index.js

@@ -10,22 +10,6 @@ import alertIcon from "../../assets/icons/alert.svg";
 
 import { connect } from "react-redux";
 
-const PriceStatus = ({ name, value, type, isDark }) => {
-  return (
-    <div className="w-full flex flex-row justify-between py-2">
-      <strong className="font-light text-sm dark:text-white">{name}</strong>
-      <span
-        className="font-bold text-sm dark:text-white"
-        style={{
-          color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
-        }}
-      >
-        {value + " " + "تومان"}
-      </span>
-    </div>
-  );
-};
-
 function ShoppingCart({
   isDark,
   isMobile,
@@ -43,8 +27,8 @@ function ShoppingCart({
   desktopContentTransform,
 }) {
   useEffect(() => {
-    // getList();
+    getList();
-    // getFactorInfo({ userId });
+    getFactorInfo({ userId });
     setHeaderOptions(headerOptions);
   }, []);
 
@@ -63,13 +47,52 @@ function ShoppingCart({
           </strong>
         </header>
         <ul className="w-full mt-2 list-none p-0">
-          {[0,1].map((product, index) => (
+          {list.map((product, index) => (
             <Product key={index} product={product} />
           ))}
         </ul>
       </div>
     );
   };
+
+  const PriceStatus = ({ name, value, type }) => {
+    return isMobile ? (
+      <div className="w-full flex flex-row justify-between py-2">
+        <strong className="font-light text-sm dark:text-white">{name}</strong>
+        <span
+          className="font-bold text-sm dark:text-white"
+          style={{
+            color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
+          }}
+        >
+          {value + " " + "تومان"}
+        </span>
+      </div>
+    ) : (
+      <div className="w-full flex flex-row justify-between py-4">
+        <strong className="font-light text-base dark:text-white text-blue5F">
+          {name}
+        </strong>
+        <span
+          className="font-medium text-xl dark:text-white"
+          style={{
+            color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
+          }}
+        >
+          {value}
+          <span
+            style={{
+              color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "",
+            }}
+            className="text-sm mr-2"
+          >
+            تومان
+          </span>
+        </span>
+      </div>
+    );
+  };
+
   return isMobile ? (
     <div className="w-full flex flex-col px-4">
       {list.map((product, index) => (
@@ -81,19 +104,16 @@ function ShoppingCart({
           name="مبلغ سبد خرید"
           value={factorInfo?.sumPrice}
           type="normal"
-          isDark={isDark}
         />
         <PriceStatus
           name="میزان تخفیف"
           value={factorInfo?.offPrice}
           type="error"
-          isDark={isDark}
         />
         <PriceStatus
           name="مالیات بر ارزش افزوده"
           value={factorInfo?.sumPrice * 0.009}
           type="error"
-          isDark={isDark}
         />
       </div>
       <div className="flex flex-row justify-between items-center w-full py-3">
@@ -124,14 +144,61 @@ function ShoppingCart({
     </div>
   ) : (
     <div
-      className={`w-full flex flex-row relative px-5 ${
+      className={`w-full flex flex-row relative gap-10 px-5 mt-10 ${
         desktopContentTransform ? "top-24" : ""
       }`}
     >
-      <div className="flex flex-col w-3/4 mt-10">
+      <div className="flex flex-col w-3/4">
         <Table />
       </div>
-      <div className="flex flex-col w-1/4"></div>
+      <div
+        className="flex flex-col w-1/4 p-10 bg-grayF9 border border-solid border-grayDB rounded-md px-4 py-4"
+        style={{ height: "fit-content" }}
+      >
+        <div className="flex flex-col w-full border-t py-2 border-gray-300 border-b">
+          <PriceStatus
+            name="مبلغ سبد خرید"
+            value={factorInfo?.sumPrice}
+            type="normal"
+          />
+          <PriceStatus
+            name="میزان تخفیف"
+            value={factorInfo?.offPrice}
+            type="error"
+          />
+          <PriceStatus
+            name="مالیات بر ارزش افزوده"
+            value={factorInfo?.sumPrice * 0.009}
+            type="error"
+          />
+        </div>
+        <div className="flex flex-row justify-between items-center w-full py-4 border-t border-b border-grayDB border-solid">
+          <strong className="font-medium text-base text-blue5F dark:text-white">
+            جمع کل سبد خرید
+          </strong>
+          <p className="font-medium text-greenBA text-xl dark:text-white">
+            {factorInfo?.payPrice}
+            <span className="font-medium text-greenBA text-sm mr-2">تومان</span>
+          </p>
+        </div>
+        <div
+          className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 mt-10 mb-4"
+          style={{ backgroundColor: "#196EC01a" }}
+        >
+          <img src={alertIcon} className="w-5 ml-2" />
+          <p className="text-xs text-blueC0 dark:text-white text-justify">
+            هزینه ارسال کالا پس از تعیین محل آدرس مشخص می‌شود
+          </p>
+        </div>
+        <Button
+          title="ادامه فرایند خرید"
+          backgroundColor="bg-blueC0"
+          border={{ color: "#196EC055", width: "1px" }}
+          width="100%"
+          color="text-white"
+          // onClick={() => }
+        />
+      </div>
     </div>
   );
 }

tailwind.config.js

@@ -20,6 +20,7 @@ module.exports = {
       yellow3: "#EFFF00",
       gray36: "#363636",
       orange1: "#FF6600",
+      greenBA: "#06BACE",
       green1: "#00FF80",
       gray20: "#202020",
       gray2077: "#20202077",
@@ -67,18 +68,18 @@ module.exports = {
       greenBA: "#06BACE",
     }),
     fontSize: {
-      'xs': 'clamp(calc(100vw / 38), 8, 13)',
+      'xs': 'clamp(9px, 2.78vw, 11px)',
-      'sm': '.875rem',
+      'sm': 'clamp(11px, 3.02vw , 13px)',
-      'tiny': '.875rem',
+      'tiny': 'clamp(13px,3.28vw, 15px)',
-      'base': '1rem',
+      'base': 'clamp(15px, 3.52vw, 17px)',
-      'lg': '1.125rem',
+      'lg': 'clamp(17px, 3.76vw, 19px)',
-      'xl': '1.25rem',
+      'xl': 'clamp(19px, 4vw, 21px)',
-      '2xl': '1.5rem',
+      '2xl': 'clamp(21px, 4.24vw, 23px)',
-      '3xl': '1.875rem',
+      '3xl': 'clamp(23px, 4.48vw, 25px)',
-      '4xl': '2.25rem',
+      '4xl': 'clamp(25px, 4.72vw, 27px)',
-      '5xl': '3rem',
+      '5xl': 'clamp(27px, 4.96vw, 29px)',
-      '6xl': '4rem',
+      '6xl': 'clamp(29px, 5.22vw, 31px)',
-      '7xl': '5rem',
+      '7xl': 'clamp(31px, 4.46vw, 33px)',
       'sm-1': '0.5rem'
     },
     extend: {