adding market place

2025-03-26 11:30:17 +05:30
parent 932ab54631
commit b585e74fcb
14 changed files with 598 additions and 220 deletions
--- a/app/src/styles/components/marketPlace/marketPlace.scss
+++ b/app/src/styles/components/marketPlace/marketPlace.scss
@@ -0,0 +1,91 @@
+@use "../../abstracts/variables" as *;
+@use "../../abstracts/mixins.scss" as *;
+
+
+.marketPlace {
+    width: calc((100vw) - (320px + 270px + 100px));
+    background-color: #FCFDFD;
+    position: absolute;
+    top: 100px;
+    left: calc(240px + 45px);
+    padding: 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    .filter-search-container {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+
+        .search-wrapper {
+            min-width: 40%;
+
+            width: 684px;
+            padding: 0;
+
+            .search-container {
+                border: none !important;
+                box-shadow: 0px 2px 10.5px 0px #0000000D;
+
+                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 {
+        .header {
+            color: var(--text-color);
+            font-weight: $medium-weight;
+            font-size: $xlarge;
+        }
+
+        .cards-wrapper-container {
+            .card-container {
+                width: 316px;
+                height: 309px;
+                border-radius: 18px;
+                padding: 12px;
+                box-shadow: 0px 2px 10.5px 0px #0000000D;
+                border: 1px solid var(--background-accent-transparent, #E0DFFF80);
+                position: relative;
+                .icon {
+                    position: absolute;
+                    top: 12px;
+                    left: 12px;
+                    width: 30px;
+                    height: 30px;
+                    border-radius: 10px;
+                    padding: 5px;
+                    background-color: var(--accent-color);
+                }
+            }
+        }
+    }
+}