polish shopping cart

Author: svdimitr

examples/ecommerce-jewellery-store/src/components/ShoppingCartList.tsx

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { chevronLeftIcon, trashIcon } from "@progress/kendo-svg-icons";
+import {
+  chevronLeftIcon,
+  trashIcon,
+  walletSolidIcon,
+  heartIcon,
+  percentIcon,
+} from "@progress/kendo-svg-icons";
 import {
   Form,
   Field,
@@ -16,6 +22,8 @@ import { NumericTextBox } from "@progress/kendo-react-inputs";
 import { useNavigate } from "react-router-dom";
 import { Layout } from "./Layout";
 import shoppingCartImage from "../assets/shoppingCartImg.png";
+import { Avatar } from "@progress/kendo-react-layout";
+import { SvgIcon } from "@progress/kendo-react-common";
 
 const EmailInput = (fieldRenderProps: FieldRenderProps) => {
   const { validationMessage, visited, ...others } = fieldRenderProps;
@@ -36,8 +44,8 @@ export const ShoppingCartList: React.FC = () => {
   };
 
   const onProceedClick = () => {
-    navigate("/paymentdetails")
-  }
+    navigate("/paymentdetails");
+  };
 
   const updateQuantity = (event) => {
     const target = event.target.element;
@@ -178,7 +186,11 @@ export const ShoppingCartList: React.FC = () => {
                       </FieldWrapper>
                     </fieldset>
                     <div className="k-form-buttons">
-                      <Button themeColor={"primary"} size={"large"} onClick={onProceedClick}>
+                      <Button
+                        themeColor={"primary"}
+                        size={"large"}
+                        onClick={onProceedClick}
+                      >
                         Proceed to Checkout
                       </Button>
                     </div>
@@ -201,8 +213,70 @@ export const ShoppingCartList: React.FC = () => {
         </Layout>
       ) : null}
       <Layout>
-        <div className="k-d-grid">
+        <div className="k-d-flex k-flex-col k-align-items-center k-py-12 k-px-4.5 k-px-sm-6 k-px-md-4 k-px-lg-7.5 k-px-xl-10 k-gap-10">
+          <div className="k-d-flex k-flex-col k-align-items-center k-gap-4 k-text-center">
+            <h2 className="k-h2 !k-mb-0">Why people choose us?</h2>
+          </div>
+          <div className="k-d-grid k-grid-cols-1 k-grid-cols-md-3 k-gap-5">
+            <div className="k-d-flex k-flex-col k-align-items-center">
+              <Avatar
+                rounded="full"
+                type="icon"
+                themeColor="primary"
+                size="large"
+              >
+                <SvgIcon icon={walletSolidIcon} size="xxlarge" />
+              </Avatar>
+              <p className="k-font-size-xl k-font-bold k-px-4 k-py-3 !k-mb-0">
+                Return Policy
+              </p>
+              <p className="k-p-4 !k-mb-0 k-text-center">
+                You can return your items within 30 days for a full refund or
+                exchange.
+              </p>
+            </div>
 
+            <div className="k-d-flex k-flex-col k-align-items-center">
+              <Avatar
+                rounded="full"
+                type="icon"
+                themeColor="primary"
+                size="large"
+              >
+                <SvgIcon icon={heartIcon} size="xxlarge" />
+              </Avatar>
+              <p className="k-font-size-xl k-font-bold k-px-4 k-py-3 !k-mb-0">
+                Included Gift Wrapping
+              </p>
+              <p className="k-p-4 !k-mb-0 k-text-center">
+                Apply your discount code at checkout to enjoy exclusive savings
+                on your order.
+              </p>
+            </div>
+
+            <div className="k-d-flex k-flex-col k-align-items-center">
+              <Avatar
+                rounded="full"
+                type="icon"
+                themeColor="primary"
+                size="large"
+              >
+                <SvgIcon icon={percentIcon} size="xxlarge" />
+              </Avatar>
+              <p className="k-font-size-xl k-font-bold k-px-4 k-py-3 !k-mb-0 k-text-center">
+                Discount Code Available
+              </p>
+              <p className="k-p-4 !k-mb-0 k-text-center">
+                Add gift wrapping for a special touch, along with a personalized
+                message for your loved ones.
+              </p>
+            </div>
+          </div>
+          <div>
+            <Button fillMode="flat" themeColor="primary">
+              See all
+            </Button>
+          </div>
         </div>
       </Layout>
     </>