Replaced second 'Add to Cart' button with 'Buy Now' button

src/Pages/Shop.js

@@ -2,10 +2,11 @@
 import { motion } from "framer-motion";
 import React from "react";
 import { useDispatch } from "react-redux";
+import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 import { addToCart } from "../Store/cartSlice";
 import Button from "../componets/Button";
-
+ 
 const ShopContainer = styled.div`
   padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar
   max-width: 1200px;
@@ -115,6 +116,16 @@ const StyledButton = styled.button`
     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); 
   }
 `;
+const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: row;  /* Default to horizontal layout */
+  gap: 10px;            /* Add space between the buttons */
+
+  @media (max-width: 768px) {
+    flex-direction: column; /* Stack buttons vertically on small screens */
+    gap: 10px;              /* Add space between stacked buttons */
+  }
+`;
 
 const products = [
   {
@@ -542,11 +553,16 @@ const products = [
 
 function Shop() {
   const dispatch = useDispatch();
-
+  const navigate = useNavigate();
   const handleAddToCart = (product) => {
     dispatch(addToCart(product));
   };
 
+ const handleBuyNow = (product) => {
+    dispatch(addToCart(product));   
+    navigate("/checkout");
+
+  };
   return (
     <ShopContainer>
       <Title
@@ -573,10 +589,13 @@ function Shop() {
             <ProductInfo>
               <ProductName>{product.name}</ProductName>
               <ProductPrice>${product.price.toFixed(2)}</ProductPrice>
+              <ButtonContainer>
+
               <Button onClick={() => handleAddToCart(product)}>
                 Add to Cart
               </Button>
-              <StyledButton onClick={() => handleAddToCart(product)}>Add to Cart</StyledButton>
+              <StyledButton onClick={() => handleBuyNow(product)}>Buy Now</StyledButton>
+  </ButtonContainer>
 
             </ProductInfo>
           </ProductCard>

src/componets/Button.js

@@ -11,20 +11,34 @@ const StyledButton = styled(motion.button)`
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.3s ease;
+    margin-right: ${props => props.noMargin ? '0' : '10px'}; /* Add margin for spacing */
+
 
   &:hover {
     background-color: ${props => props.primary ? '#7c2214' : 'white'};
     color: ${props => props.primary ? 'white' : '#7c2214'}
   }
 `;
+const ButtonContainer = styled.div`
+  display: flex;
+  flex-direction: row;  /* Default to horizontal layout */
+  gap: 10px;            /* Add space between the buttons */
 
-const Button = ({ children, primary, onClick, ...props }) => {
+  @media (max-width: 768px) {
+    flex-direction: column; /* Stack buttons vertically on small screens */
+    gap: 10px;              /* Add space between stacked buttons */
+  }
+`;
+
+const Button = ({ children, primary, onClick, noMargin, ...props }) => {
   return (
     <StyledButton
       primary={primary}
       onClick={onClick}
       whileHover={{ scale: 1.05 }}
       whileTap={{ scale: 0.95 }}
+      noMargin={noMargin} /* pass the noMargin prop */
+
       {...props}
     >
       {children}