Initial commit

src/components/Ads/Ads1.module.css

@@ -0,0 +1,70 @@
+.adsContainer {
+  margin: 0 16px;
+}
+
+.adsContainer :global(.ant-card-body) {
+  padding: 6px 10px !important;
+  text-align: start;
+  width: 100%;
+}
+
+.adsContainer * {
+  transition: all 0.3s ease;
+}
+
+:global(.darkApp) .adsContainer {
+  margin: 0 16px;
+  background-color: #181818 !important;
+  border-color: #363636 !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+}
+
+:global(.darkApp) .adsContainer:hover {
+  background-color: #363636 !important;
+  border-color: #424242 !important;
+  transform: translateY(-1px);
+  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.5);
+}
+
+:global(.darkApp) .adsContainer {
+  backdrop-filter: blur(12px);
+  border-radius: 8px;
+}
+
+.rightRectangle {
+  position: absolute;
+  right: 16px;
+  z-index: 10;
+}
+
+.leftRectangle {
+  position: absolute;
+  left: 16px;
+  z-index: 10;
+}
+
+:global(.darkApp) .rightRectangle {
+  right: 0px;
+}
+
+:global(.darkApp) .leftRectangle {
+  left: 0px;
+}
+
+.adsCard {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  text-align: left;
+  height: 64px;
+  border-radius: 8px;
+  background-color: #c8e6a9;
+}
+
+.adsCard :global(.ant-card-body) {
+  padding: 8px !important;
+}
+
+:global(.darkApp) .adsCard {
+  background-color: #2b4511;
+}