Initial commit

src/components/InfoButton/InfoButton.module.css

@@ -0,0 +1,201 @@
+
+
+.homeServiceCard {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: flex-start;
+  padding: 12px 18px !important;
+  row-gap: 10px;
+  transition: all 0.3s ease;
+  border-radius: 50px;
+  background-color: #FFF;
+}
+
+.homeServiceCard :global(.ant-card-body) {
+  padding: 0px !important;
+  text-align: start;
+  width: 100%;
+}
+
+/* Removed duplicate rule */
+
+/* Smooth transitions for all interactive elements */
+
+.homeServiceCard * {
+  transition: all 0.3s ease;
+}
+
+
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .languageSwitch,
+  .themeSwitch,
+  .promotionContainer {
+    display: none;
+  }
+  .logo {
+    width: 100%;
+    height: 30vh;
+    position: relative;
+    bottom: 5%;
+    border-radius: 50% !important;
+  }
+  .homeContainer {
+    padding: 10vh 10vw;
+    height: 100vh;
+    min-height: 100vh;
+  }
+}
+
+/* Mobile landscape orientation */
+@media (max-height: 500px) and (orientation: landscape) {
+  .homeContainer {
+    height: 100vh;
+    min-height: 100vh;
+    background-attachment: scroll;
+  }
+}
+
+/* Mobile portrait orientation */
+@media (max-width: 768px) and (orientation: portrait) {
+  .homeContainer {
+    height: 100vh;
+    min-height: 100vh;
+    background-attachment: scroll;
+  }
+}
+
+/* Large screens */
+@media (min-width: 1200px) {
+  .homeContainer {
+    background-attachment: fixed;
+  }
+}
+
+/* Ensure full coverage on all devices */
+@media (max-width: 480px) {
+  .homeContainer {
+    height: 100vh;
+    min-height: 100vh;
+    width: 100vw;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+@media (min-width: 1025px) {
+  .languageSwitch,
+  .themeSwitch,
+  .promotionContainer {
+    display: none;
+  }
+  .logo {
+    width: 100%;
+    height: 30vh;
+    position: relative;
+    bottom: 5%;
+    border-radius: 50% !important;
+  }
+  .homeContainer {
+    padding: 10vh 10vw;
+  }
+}
+
+/* Enhanced Dark Theme Styles */
+:global(.darkApp) .homeContainer {
+  background-image: url("/background-dark.svg");
+  background-color: #0a0a0a;
+  color: #ffffff;
+}
+
+:global(.darkApp) .homeContainer h1,
+:global(.darkApp) .homeContainer h2,
+:global(.darkApp) .homeContainer h3,
+:global(.darkApp) .homeContainer h4,
+:global(.darkApp) .homeContainer h5,
+:global(.darkApp) .homeContainer h6 {
+  color: #ffffff;
+}
+
+:global(.darkApp) .homeContainer p,
+:global(.darkApp) .homeContainer span {
+  color: #b0b0b0;
+}
+
+:global(.darkApp) .homeServiceCard {
+  background-color: b0b0b0 !important;
+  border-color: #363636 !important;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+}
+
+:global(.darkApp) .homeServiceCard:hover {
+  background-color: #363636 !important;
+  border-color: #424242 !important;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.5);
+}
+
+:global(.darkApp) .socialIcon path {
+  fill: none !important;
+  stroke: #fff !important;
+  transition: all 0.3s ease;
+}
+
+:global(.darkApp) .socialIcon:hover path {
+  stroke: #fff !important;
+  filter: drop-shadow(0 0 8px #fff);
+}
+
+:global(.darkApp) .infoIcon > path {
+  fill: none !important;
+  stroke: #fff !important;
+  transition: all 0.3s ease;
+}
+
+:global(.darkApp) .infoIcon g path {
+  fill: none !important;
+  stroke: #fff !important;
+  transition: all 0.3s ease;
+}
+
+:global(.darkApp) .infoIcon:hover > path,
+:global(.darkApp) .infoIcon:hover g path {
+  stroke: #fff !important;
+  filter: drop-shadow(0 0 6px #fff);
+}
+
+/* Glass morphism effect for cards in dark mode */
+:global(.darkApp) .homeServiceCard {
+  backdrop-filter: blur(12px);
+  border-radius: 50px;
+}
+
+/* Enhanced text readability in dark mode */
+:global(.darkApp) .item-description {
+  color: #b0b0b0 !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+:global(.darkApp) .ant-typography {
+  color: #ffffff !important;
+}
+
+:global(.darkApp) .ant-typography.ant-typography-secondary {
+  color: #b0b0b0 !important;
+}
+
+:global(.darkApp) .deliveryIcon path,
+:global(.darkApp) .deliveryIcon circle {
+  fill: #fff !important;
+  stroke: #fff !important;
+  transition: all 0.3s ease;
+}
+
+.infoIcon {
+  width: 24px;
+  height: 24px;
+  position: relative;
+  top: -2px
+}
+

src/components/InfoButton/InfoButton.tsx

@@ -0,0 +1,50 @@
+import { Card } from "antd";
+import BackIcon from "components/Icons/BackIcon";
+import NextIcon from "components/Icons/NextIcon";
+import { useAppSelector } from "redux/hooks";
+import ProTitle from "../ProTitle";
+import styles from "./InfoButton.module.css";
+
+export const InfoButton = ({
+  icon,
+  title,
+  onInfoClick,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  onInfoClick: () => void;
+}) => {
+  const { isRTL } = useAppSelector((state) => state.locale);
+  return (
+    <Card className={styles.homeServiceCard} onClick={onInfoClick}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          marginTop: 1,
+        }}
+      >
+        <div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
+          {icon}
+          <ProTitle
+            level={5}
+            style={{
+              marginTop: -2,
+              fontSize: "1rem",
+              color: "rgba(95, 108, 123, 1)",
+            }}
+          >
+            {title}
+          </ProTitle>
+        </div>
+
+        {isRTL ? (
+          <BackIcon className={styles.infoIcon} />
+        ) : (
+          <NextIcon className={styles.infoIcon} />
+        )}
+      </div>
+    </Card>
+  );
+};