idk stuff

package.json

@@ -30,7 +30,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.1",
+    "react-slick": "^0.30.2",
     "react-toastify": "^10.0.5",
+    "slick-carousel": "^1.8.1",
     "styled-components": "^5.3.6",
     "ton": "13.3.0",
     "ton-core": "^0.46.0",
@@ -45,6 +47,7 @@
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
+    "@types/react-slick": "^0.23.13",
     "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react": "^3.0.1",
     "typescript": "^4.9.5",

src/components/BuyCard.css

@@ -1,8 +1,8 @@
 /* Product Image Styling */
 .product-image {
-  border-radius: 10px;
   width: 100%;
-  height: auto; /* Height set to auto to maintain aspect ratio */
+  height: 200px;
+  object-fit: cover;
 }
 
 /* Strain List Item Styling */

src/components/BuyCard.tsx

@@ -9,7 +9,6 @@ import {
   ProductName,
   Rating,
   Star,
-  HalfStar,
   BuyCardStyled,
 } from "./styled/styled";
 import { convertToTon } from "../services/exchangeRateService";
@@ -58,10 +57,7 @@ const BuyCard: React.FC<ProductProps> = ({
   useEffect(() => {
     const convertPrice = async () => {
       try {
-        const convertedPrice = await convertToTon(
-          price,
-          selectedCurrency
-        );
+        const convertedPrice = await convertToTon(price, selectedCurrency);
         setTotalPrice(selectedQuantity * convertedPrice);
       } catch (error) {
         console.error("Failed to convert price:", error);
@@ -71,22 +67,26 @@ const BuyCard: React.FC<ProductProps> = ({
     convertPrice();
   }, [selectedCurrency, selectedQuantity, price]);
 
-  const intPart = Math.floor(rating);
-  const fracPart = rating % 1;
-
   return (
     <BuyCardStyled>
-      <img src={imageUrl} alt={name} className="product-image" />
+      <img
+        src={imageUrl}
+        alt={name}
+        style={{ width: "100%", borderRadius: "15px", marginBottom: "10px" }}
+      />
       <HeaderWrapper>
         <ProductName>{name}</ProductName>
         <Rating>
-          {[...Array(intPart)].map((_, index) => (
-            <Star icon={faStar} key={index} />
-          ))}
-          {fracPart > 0 && <Star icon={faStarHalfStroke} />}
-          {[...Array(5 - Math.ceil(rating))].map((_, index) => (
-            <HalfStar icon={faStar} key={index} />
-          ))}
+          <p
+            style={{
+              fontSize: "1rem",
+              marginRight: "5px",
+              color: "#333",
+            }}
+          >
+            {rating.toString()}
+          </p>
+          <Star icon={faStar} />
         </Rating>
       </HeaderWrapper>
 
@@ -112,7 +112,6 @@ const BuyCard: React.FC<ProductProps> = ({
           amount={totalPrice}
           item={{ id: id, quantity: selectedQuantity, price: totalPrice }}
         />
-        <br />
       </ButtonCenterDiv>
     </BuyCardStyled>
   );

src/components/ProductsList.tsx

@@ -1,21 +1,100 @@
 // src/components/ProductsList.tsx
 import React from "react";
+import Slider from "react-slick";
 import BuyCard from "./BuyCard";
 import { ProductProps } from "./types";
-import { StyledProductsList } from "./styled/styled";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import { Typography } from "@mui/material";
 
 interface ProductsListProps {
   products: ProductProps[];
 }
 
 const ProductsList: React.FC<ProductsListProps> = ({ products }) => {
+  const settings = {
+    dots: false,
+    infinite: false,
+    speed: 500,
+    slidesToShow: 4,
+    slidesToScroll: 4,
+
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: 2,
+          slidesToScroll: 2,
+          infinite: false,
+          dots: false,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  };
+
+  const flowers = products
+    .filter((product) => product.category === "flowers")
+    .slice(0, 8);
+  const hash = products
+    .filter((product) => product.category === "hash")
+    .slice(0, 8);
+  const oils = products
+    .filter((product) => product.category === "oils")
+    .slice(0, 8);
+
   return (
-    <StyledProductsList>
-      {products.map((product) => (
-        <BuyCard key={product.id} {...product}  />
-
-      ))}
-    </StyledProductsList>
+    <>
+      <Typography
+        variant="h3"
+        style={{ textAlign: "start", marginBottom: "20px" }}
+      >
+        Flowers
+      </Typography>
+
+      <Slider {...settings}>
+        {flowers.map((product) => (
+          <BuyCard {...product} key={product.id} />
+        ))}
+      </Slider>
+
+      <br />
+      <br />
+
+      <Typography
+        variant="h3"
+        style={{ textAlign: "start", marginBottom: "20px" }}
+      >
+        Hash
+      </Typography>
+
+      <Slider {...settings}>
+        {hash.map((product) => (
+          <BuyCard {...product} key={product.id} />
+        ))}
+      </Slider>
+
+      <br />
+      <br />
+      <Typography
+        variant="h3"
+        style={{ textAlign: "start", marginBottom: "20px" }}
+      >
+        Oils
+      </Typography>
+
+      <Slider {...settings}>
+        {oils.map((product) => (
+          <BuyCard {...product} key={product.id} />
+        ))}
+      </Slider>
+    </>
   );
 };
 

src/components/styled/styled.tsx

@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styled from "styled-components";
 
 export const Card = styled.div`
-  padding: 18px 20px;
+  padding: 10px 20px;
   border-radius: 8px;
   background-color: white;
 
@@ -103,11 +103,9 @@ export const AddToCartButtonCard = styled(Button)`
 
 export const BuyCardStyled = styled.div`
   background-color: #ffffff;
-  border-radius: 10px;
-  padding: 20px;
+  border-radius: 15px;
   margin: 10px;
-  width: 250px;
-  min-height: 300px;
+  padding: 10px;
 `;
 
 export const HeaderWrapper = styled.div`
@@ -222,11 +220,13 @@ export const StrainText = styled.p`
   color: inherit;
 `;
 
-export const StyledProductsList = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 20px;
+export const ProductsListContainer = styled.div`
+  background-color: #3bb75e;
+`;
+export const StyledProductContainer = styled.div`
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 `;
 
 // Define NetworkBadge outside of any component
@@ -260,7 +260,6 @@ export const StyledApp = styled.div`
 `;
 
 export const AppContainer = styled.div`
-  max-width: 900px;
   margin: 0 auto;
 `;
 

src/components/types.ts

@@ -1,5 +1,6 @@
 // src/components/types.ts
 export interface ProductProps {
+    category: string;
     id: string;
     imageUrl: string;
     name: string;