added api to fetch data

app/src/styles/components/marketPlace/marketPlace.scss

@@ -0,0 +1,187 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins.scss" as *;
+
+.marketplace-wrapper {
+    height: 100vh;
+    width: 100vw;
+    z-index: #{$z-index-marketplace};
+    background-color: var(--background-color-secondary);
+    position: absolute;
+    left: 0;
+    padding: 100px 50px;
+
+    .marketplace-container {
+        padding: 20px 2px;
+        height: calc(100vh - 120px);
+        background-color: var(--background-color);
+        box-shadow: #{$box-shadow-medium};
+        border-radius: #{$border-radius-extra-large};
+    }
+
+    .marketPlace {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        left: calc(120px / 2);
+        top: 100px;
+        padding: 14px;
+        padding-bottom: 60px;
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+
+        .filter-search-container {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+
+            .search-wrapper {
+                min-width: 60%;
+                max-width: 684px;
+                padding: 0;
+                border-radius: $border-radius-large ;
+
+                .search-container {
+                    border: none !important;
+                    box-shadow: $box-shadow-medium;
+                    border-radius: $border-radius-large ;
+
+                    input {
+                        border: none !important;
+                        outline: none;
+
+                    }
+                }
+            }
+
+            .regularDropdown-container {
+                max-width: 159px;
+            }
+
+            .button {
+                padding: 5px 20px;
+                border: 1px solid var(--accent-color);
+                border-radius: 14px;
+            }
+
+            .rating-container {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+
+                .stars {
+                    display: flex;
+                    align-items: center;
+
+                }
+            }
+        }
+
+        .cards-container-container {
+            padding: 0px 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+
+            .header {
+                color: var(--text-color);
+                font-weight: $medium-weight;
+                font-size: $xlarge;
+            }
+
+            .cards-wrapper-container {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 28px;
+
+                .card-container {
+                    width: calc(25% - 23px);
+                    border-radius: 18px;
+                    padding: 12px;
+                    box-shadow: 0px 2px 10.5px 0px #0000000D;
+                    border: 1px solid var(--background-accent-transparent, #E0DFFF80);
+                    position: relative;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    gap: 6px;
+
+                    .icon {
+                        position: absolute;
+                        top: 12px;
+                        left: 12px;
+                        width: 30px;
+                        height: 30px;
+                        border-radius: 10px;
+                        padding: 5px;
+                        background-color: var(--accent-color);
+                    }
+
+                    .image-container {
+                        width: 100%;
+                        display: flex;
+                        justify-content: center;
+                    }
+
+                    .assets-container {
+                        display: flex;
+                        justify-content: space-between;
+
+                        .name-container {
+                            display: flex;
+                            flex-direction: column;
+                            gap: 3px;
+
+                            .asstes-container {
+                                font-weight: #{$bold-weight};
+                                font-size: $regular ;
+                            }
+
+                            .assets-date {
+                                color: var(--accent-color);
+                                font-size: $small;
+                            }
+                        }
+
+                        .details {
+                            display: flex;
+                            align-items: center;
+                            gap: 10px;
+
+                            .content {
+                                display: flex;
+                                align-items: center;
+                                gap: 6px;
+                            }
+                        }
+                    }
+
+                    .vendor-icon {
+
+                        font-weight: #{$bold-weight};
+                        font-size: $regular ;
+                    }
+
+                    .stars-container {
+                        display: flex;
+                        justify-content: space-between;
+                    }
+
+                    .buy-now-button {
+                        width: 100%;
+                        background-color: var(--background-color-secondary);
+                        border-radius: $border-radius-extra-large ;
+                        padding: 8px 0;
+                        @include flex-center;
+                        color: var(--accent-color);
+
+                        &:hover {
+                            cursor: pointer;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}