added style to cards

package.json

@@ -29,6 +29,7 @@
     "mapbox-gl": "^3.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.23.1",
     "react-slick": "^0.30.2",
     "react-toastify": "^10.0.5",

src/App.css

@@ -7,6 +7,11 @@
   --tg-theme-text-color: #333;
 }
 
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
 
 /* Responsive */
 
@@ -26,7 +31,7 @@
 /* General */
 
 body {
-  font-family: 'Roboto', sans-serif;
+  font-family: 'Prompt', sans-serif;
   background-color: var(--tg-theme-bg-color);
   color: var(--tg-theme-text-color);
   margin: 0;

src/App.tsx

@@ -38,6 +38,8 @@ import { useCurrency } from "./providers/useCurrency";
 // import WalletBalanceTon from "./components/WalletBalanceTon";
 import WalletTxList from "./components/WalletTxList";
 
+import backgroundBlured from "../public/app-background.svg";
+
 function App() {
   const { network } = useTonConnect();
   const { wallet } = useTonConnect();
@@ -83,7 +85,11 @@ function App() {
   };
 
   return (
-    <StyledApp>
+    <StyledApp
+      style={{
+        background: "#f0f0f0",
+      }}
+    >
       <ToastContainer /> {/* Place ToastContainer at the root level */}
       <AppContainer>
         <FlexBoxCol>

src/components/BuyCard.css

@@ -1,7 +1,5 @@
 /* Product Image Styling */
 .product-image {
-  width: 100%;
-  height: 200px;
   object-fit: cover;
 }
 

src/components/BuyCard.tsx

@@ -8,12 +8,10 @@ import {
   HeaderWrapper,
   Rating,
   Star,
-  BuyCardStyled,
 } from "./styled/styled";
 import { convertToTon } from "../services/exchangeRateService";
 import { useCurrency } from "../providers/useCurrency";
 import { Typography } from "@mui/material";
-import Link from "@mui/material/Link"; // Import Link component from MUI
 
 interface ProductProps {
   id: string;
@@ -37,7 +35,7 @@ const BuyCard: React.FC<ProductProps> = ({
   const [selectedQuantity, setSelectedQuantity] = useState<number>(5);
   const { selectedCurrency, updateSelectedCurrency } = useCurrency();
   const [totalPrice, setTotalPrice] = useState<number>(5 * price);
-  const descriptionFirstSentence = description.split(".")[0];
+  const descriptionFirstSentence = description.split(".")[0] + ".";
   const handleQuantityChange = (
     event: React.ChangeEvent<HTMLSelectElement>
   ) => {
@@ -68,18 +66,32 @@ const BuyCard: React.FC<ProductProps> = ({
   }, [selectedCurrency, selectedQuantity, price]);
 
   return (
-    <BuyCardStyled>
+    <div
+      style={{
+        background: "white",
+        borderRadius: "10px",
+        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+        padding: "10px",
+        margin: "10px",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        // width: "300px",
+      }}
+    >
       <div style={{ display: "flex", justifyContent: "center" }}>
-        <img
-          src={imageUrl}
-          alt={name}
+        <div
           style={{
-            width: "100%",
-            height: "150px",
-            objectFit: "cover",
+            width: "200px",
+            objectFit: "contain",
             borderRadius: "10px",
+            backgroundImage: `url(${imageUrl})`,
+            backgroundSize: "contain",
+            backgroundRepeat: "no-repeat",
+            backgroundPosition: "center",
+            height: "200px",
           }}
-        />
+        ></div>
       </div>
       <div
         style={{
@@ -88,22 +100,30 @@ const BuyCard: React.FC<ProductProps> = ({
           flexDirection: "column",
           gap: "10px",
           justifyContent: "space-between",
+          height: "200px",
         }}
       >
         <HeaderWrapper>
-          <Typography variant="h6">{name}</Typography>
-          <Rating>
-            <Typography>{rating.toString()}</Typography>
-            <Star icon={faStar} />
-          </Rating>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              width: "100%",
+            }}
+          >
+            <Typography variant="h6">{name}</Typography>
+            <Rating>
+              <Typography>{rating.toString()}</Typography>
+              <Star icon={faStar} />
+            </Rating>
+          </div>
         </HeaderWrapper>
 
         <EmojiStrains strains={strains} />
-
-        {/* Description with a link */}
-        <Typography variant="body2">
-          {descriptionFirstSentence + "."}
-        </Typography>
+        <div style={{ height: "100px", overflow: "hidden" }}>
+          {/* Description with a link */}
+          <Typography variant="body2">{descriptionFirstSentence}</Typography>
+        </div>
 
         <ButtonSpaceBetweenContainer>
           <select
@@ -129,7 +149,7 @@ const BuyCard: React.FC<ProductProps> = ({
           />
         </ButtonSpaceBetweenContainer>
       </div>
-    </BuyCardStyled>
+    </div>
   );
 };
 

src/components/ProductsList.tsx

@@ -19,6 +19,7 @@ const ProductsList: React.FC<ProductsListProps> = ({ products }) => {
     speed: 500,
     slidesToShow: 3,
     slidesToScroll: 3,
+    rows: 1,
 
     responsive: [
       {
@@ -28,13 +29,15 @@ const ProductsList: React.FC<ProductsListProps> = ({ products }) => {
           slidesToScroll: 2,
           infinite: false,
           dots: false,
+          rows: 1,
         },
       },
       {
         breakpoint: 600,
         settings: {
           slidesToShow: 1,
           slidesToScroll: 1,
+          rows: 1,
         },
       },
     ],
@@ -59,11 +62,13 @@ const ProductsList: React.FC<ProductsListProps> = ({ products }) => {
         Flowers
       </Typography>
 
-      <Slider {...settings}>
-        {flowers.map((product) => (
-          <BuyCard {...product} key={product.id} />
-        ))}
-      </Slider>
+      <div key="flowers">
+        <Slider {...settings}>
+          {flowers.map((product) => (
+            <BuyCard {...product} key={product.id} />
+          ))}
+        </Slider>
+      </div>
 
       <br />
       <br />
@@ -75,12 +80,13 @@ const ProductsList: React.FC<ProductsListProps> = ({ products }) => {
         Hash
       </Typography>
 
-      <Slider {...settings}>
-        {hash.map((product) => (
-          <BuyCard {...product} key={product.id} />
-        ))}
-      </Slider>
-
+      <div key="hash">
+        <Slider {...settings}>
+          {hash.map((product) => (
+            <BuyCard {...product} key={product.id} />
+          ))}
+        </Slider>
+      </div>
       <br />
       <br />
       <Typography
@@ -89,12 +95,13 @@ const ProductsList: React.FC<ProductsListProps> = ({ products }) => {
       >
         Oils
       </Typography>
-
-      <Slider {...settings}>
-        {oils.map((product) => (
-          <BuyCard {...product} key={product.id} />
-        ))}
-      </Slider>
+      <div key="oils">
+        <Slider {...settings}>
+          {oils.map((product) => (
+            <BuyCard {...product} key={product.id} />
+          ))}
+        </Slider>
+      </div>
     </>
   );
 };

src/components/styled/styled.tsx

@@ -100,15 +100,9 @@ export const AddToCartButtonCard = styled(Button)`
   animation: fadeIn 0.5s;
 `;
 
-export const BuyCardStyled = styled.div`
-  border-radius: 15px;
-  margin: 0 10px;
-`;
-
 export const HeaderWrapper = styled.div`
   display: flex;
   flex-direction: row;
-  gap: 10px;
 `;
 
 export const ButtonSpaceBetweenContainer = styled.div`