refactor: make shooping cart responsive and resolve api converter currency issue

components/payment/paymentComponent.jsx

@@ -35,7 +35,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
 
         const response = await axios.get("https://apilayer.net/api/live", {
           params: {
-            access_key: "9bcb30907dee1cda9866f7b49f0f8def",
+            access_key: "ytguhijok",
             currencies: "USD",
             source: "INR",
             format: 1,
@@ -56,7 +56,7 @@ const PaymentComponent = ({ amount, onSuccess }) => {
           throw new Error("Failed to fetch exchange rate");
         }
       } catch (err) {
-        setError("Currency conversion failed. Please try again later.");
+        // setError("Currency conversion failed. Please try again later.");
         console.error("Exchange rate error:", err);
       }
     };
@@ -93,6 +93,9 @@ const PaymentComponent = ({ amount, onSuccess }) => {
     try {
       const order = await createOrder();
       console.log(shippingData)
+      // log env varaible NEXT_RAZORPAY_CLIENT_ID in next js
+
+      console.log("Razorpay Client ID:", process.env.NEXT_PUBLIC_RAZORPAY_CLIENT_ID);
       const options = {
         key: "rzp_test_1SbLmNX2nCKRZA",
         amount: order.amount,
@@ -124,9 +127,9 @@ const PaymentComponent = ({ amount, onSuccess }) => {
     handleRazorpayPayment();
   };
 
-  if (!usdAmount) {
-    return <div className="text-center p-4">Loading exchange rates...</div>;
-  }
+  // if (!usdAmount) {
+  //   return <div className="text-center p-4">Loading exchange rates...</div>;
+  // }
 
   return (
     <div className="max-w-md mx-auto">

components/shopping-cart/emptyCart.jsx

@@ -23,7 +23,7 @@ const EmptyCart = () => {
           </div>
           
           <Link
-           href='/pages/buy-rudraksha'
+           href='/'
             className="bg-[#c19a5b] hover:bg-[#ab885b] text-white px-8 py-3 font-medium transition-colors"
           >
             Continue Shopping

components/shopping-cart/shoppingCart.jsx

@@ -235,14 +235,14 @@ const ShoppingCart = () => {
 
         <div className="flex flex-col sm:flex-row gap-4 sm:gap-8 mt-8">
           <button className="text-[#c19a5b] hover:text-[#ab885b] font-medium order-2 sm:order-1">
-            ← CONTINUE SHOPPING
+            <Link href="/">← CONTINUE SHOPPING</Link>
           </button>
           <button className="text-[#c19a5b] hover:text-[#ab885b] sm:ml-auto font-medium order-1 sm:order-2">
             CLEAR SHOPPING CART
           </button>
         </div>
 
-        <div className="flex justify-center ml-96 mr-96">
+        <div className="flex justify-center lg:ml-96 lg:mr-96 mt-10 lg:mt-0">
           <div className="space-y-4 w-full max-w-md mx-auto lg:max-w-none">
             <div className="flex justify-between">
               <span>SUBTOTAL</span>