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;
+}

src/components/Ads/Ads1.tsx

@@ -0,0 +1,59 @@
+import { Card } from "antd";
+import BuildIcon from "components/Icons/ads/BuildIcon";
+import LeftRectangle from "components/Icons/LeftRectangle";
+import RightRectangle from "components/Icons/RightRectangle";
+import ProText from "components/ProText";
+import ProTitle from "components/ProTitle";
+import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
+import styles from "./Ads1.module.css";
+
+export default function Ads1({ className }: { className?: string }) {
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.adsContainer + className}>
+      {isRTL ? (
+        <LeftRectangle className={styles.leftRectangle} />
+      ) : (
+        <RightRectangle className={styles.rightRectangle} />
+      )}
+      <Card
+        className={styles.adsCard}
+        style={{
+          textAlign: isRTL ? "right" : "left",
+        }}
+      >
+        <ProTitle
+          style={{
+            marginTop: 5,
+            fontSize: 14,
+          }}
+        >
+          {t("home.promotion.description")}
+        </ProTitle>
+
+        <ProText
+          style={{
+            marginTop: 5,
+            fontSize: 14,
+          }}
+        >
+          {t("home.promotion.title")}
+        </ProText>
+
+        <div
+          style={{
+            position: "absolute",
+            [isRTL ? "left" : "right"]: 5,
+            top: 5,
+            zIndex: 11,
+          }}
+        >
+          <BuildIcon />
+        </div>
+      </Card>
+    </div>
+  );
+}

src/components/Ads/Ads2.module.css

@@ -0,0 +1,71 @@
+.adsContainer {
+  margin: 0px;
+  position: relative;
+}
+
+.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: 0px;
+  z-index: 10;
+}
+
+.leftRectangle {
+  position: absolute;
+  left: 0px;
+  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;
+}

src/components/Ads/Ads2.tsx

@@ -0,0 +1,58 @@
+import { Card } from "antd";
+import BuildIcon from "components/Icons/ads/BuildIcon";
+import LeftRectangle from "components/Icons/LeftRectangle";
+import RightRectangle from "components/Icons/RightRectangle";
+import ProText from "components/ProText";
+import ProTitle from "components/ProTitle";
+import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
+import styles from "./Ads2.module.css";
+
+export default function Ads2({
+  className,
+}: {
+  className?: string;
+}) {
+  const { t } = useTranslation();
+  const { isRTL } = useAppSelector((state) => state.locale);
+
+  return (
+    <div className={styles.adsContainer}>
+      {isRTL ? (
+        <LeftRectangle className={styles.leftRectangle} />
+      ) : (
+        <RightRectangle className={styles.rightRectangle} />
+      )}
+      <Card className={styles.adsCard}>
+        <ProTitle
+          style={{
+            marginTop: 5,
+            fontSize: 14,
+          }}
+        >
+          {t("home.promotion.description")}
+        </ProTitle>
+
+        <ProText
+          style={{
+            marginTop: 5,
+            fontSize: 14,
+          }}
+        >
+          {t("home.promotion.title")}
+        </ProText>
+
+        <div
+          style={{
+            position: "absolute",
+            [isRTL ? "left" : "right"]: 5,
+            top: 5,
+            zIndex: 11,
+          }}
+        >
+          <BuildIcon />
+        </div>
+      </Card>
+    </div>
+  );
+}