mayak-common-library 0.0.12 → 0.0.14

package/dist/index.d.mts

@@ -104,10 +104,53 @@ declare const Providers: FC<PropsWithChildren>;
 
 interface AppBarProps {
     links: {
-        href: string;
+        path: string;
         title: string;
     }[];
 }
 declare const AppBar: FC<AppBarProps>;
 
-export { AppBar, CustomAvatar as Avatar, CustomBadge as Badge, Button, CustomChip as Chip, FromToInput, Greet, IconButton, CustomInput as Input, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, Text };
+interface ImageContainerProps {
+    src: any;
+    alt: string;
+    contentful?: boolean;
+    priority?: boolean;
+    loading?: "lazy" | "eager" | undefined;
+    width?: string;
+    height?: string;
+    objectFit?: string;
+}
+declare const ImageContainer: FC<ImageContainerProps>;
+
+interface CategoryCardProps {
+    image_url?: string;
+    title: string;
+    text: string;
+    link: string;
+}
+declare const CategoryCard: FC<CategoryCardProps>;
+
+interface ArticleCardProps {
+    image_src?: string;
+}
+declare const ArticleCard: FC<ArticleCardProps>;
+
+interface JobCardProps {
+}
+declare const JobCard: FC<JobCardProps>;
+
+declare const RealtorCard: () => react_jsx_runtime.JSX.Element;
+
+interface RealtyCardProps {
+}
+declare const RealtyCard: FC<RealtyCardProps>;
+
+interface TeamPersonCardProps {
+    image_url?: string;
+    name: string;
+    position: string;
+    text: string;
+}
+declare const TeamPersonCard: FC<TeamPersonCardProps>;
+
+export { AppBar, ArticleCard, CustomAvatar as Avatar, CustomBadge as Badge, Button, CategoryCard, CustomChip as Chip, FromToInput, Greet, IconButton, ImageContainer, CustomInput as Input, JobCard, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, RealtorCard, RealtyCard, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, TeamPersonCard, Text };

package/dist/index.d.ts

@@ -104,10 +104,53 @@ declare const Providers: FC<PropsWithChildren>;
 
 interface AppBarProps {
     links: {
-        href: string;
+        path: string;
         title: string;
     }[];
 }
 declare const AppBar: FC<AppBarProps>;
 
-export { AppBar, CustomAvatar as Avatar, CustomBadge as Badge, Button, CustomChip as Chip, FromToInput, Greet, IconButton, CustomInput as Input, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, Text };
+interface ImageContainerProps {
+    src: any;
+    alt: string;
+    contentful?: boolean;
+    priority?: boolean;
+    loading?: "lazy" | "eager" | undefined;
+    width?: string;
+    height?: string;
+    objectFit?: string;
+}
+declare const ImageContainer: FC<ImageContainerProps>;
+
+interface CategoryCardProps {
+    image_url?: string;
+    title: string;
+    text: string;
+    link: string;
+}
+declare const CategoryCard: FC<CategoryCardProps>;
+
+interface ArticleCardProps {
+    image_src?: string;
+}
+declare const ArticleCard: FC<ArticleCardProps>;
+
+interface JobCardProps {
+}
+declare const JobCard: FC<JobCardProps>;
+
+declare const RealtorCard: () => react_jsx_runtime.JSX.Element;
+
+interface RealtyCardProps {
+}
+declare const RealtyCard: FC<RealtyCardProps>;
+
+interface TeamPersonCardProps {
+    image_url?: string;
+    name: string;
+    position: string;
+    text: string;
+}
+declare const TeamPersonCard: FC<TeamPersonCardProps>;
+
+export { AppBar, ArticleCard, CustomAvatar as Avatar, CustomBadge as Badge, Button, CategoryCard, CustomChip as Chip, FromToInput, Greet, IconButton, ImageContainer, CustomInput as Input, JobCard, CustomMenuItem as MenuItem, PhoneInput, Providers, CustomRadio as Radio, CustomRadioGroup as RadioGroup, RealtorCard, RealtyCard, CustomSelect as Select, SelectPro, CustomSlider as Slider, CustomSwitch as Switch, TeamPersonCard, Text };

package/dist/index.js

@@ -60,23 +60,30 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   AppBar: () => AppBar_default,
+  ArticleCard: () => ArticleCard_default,
   Avatar: () => Avatar_default,
   Badge: () => Badge_default,
   Button: () => Button_default,
+  CategoryCard: () => CategoryCard_default,
   Chip: () => Chip_default,
   FromToInput: () => FromToInput_default,
   Greet: () => Greet,
   IconButton: () => IconButton_default,
+  ImageContainer: () => ImageContainer_default,
   Input: () => Input_default,
+  JobCard: () => JobCard_default,
   MenuItem: () => MenuItem_default,
   PhoneInput: () => PhoneInput_default,
   Providers: () => Providers_default,
   Radio: () => Radio_default,
   RadioGroup: () => RadioGroup_default,
+  RealtorCard: () => RealtorCard_default,
+  RealtyCard: () => RealtyCard_default,
   Select: () => Select_default,
   SelectPro: () => SelectPro_default,
   Slider: () => Slider_default,
   Switch: () => Switch_default,
+  TeamPersonCard: () => TeamPersonCard_default,
   Text: () => Text_default
 });
 module.exports = __toCommonJS(src_exports);
@@ -160,7 +167,7 @@ var IconButton_default = IconButton;
 var import_react = require("react");
 var import_material3 = require("@mui/material");
 
-// src/assets/dropdown-arrow.svg
+// src/icons/dropdown-arrow.svg
 var dropdown_arrow_default = "./dropdown-arrow-CDZAF5GJ.svg";
 
 // src/components/Select/Select.tsx
@@ -248,14 +255,14 @@ var CustomSelect = (props) => {
 };
 var Select_default = CustomSelect;
 
-// src/assets/search.svg
+// src/icons/search.svg
 var search_default = "./search-HJGCO2DZ.svg";
 
 // src/components/Select/SelectPro.tsx
 var import_react2 = require("react");
 var import_material4 = require("@mui/material");
 
-// src/assets/close.svg
+// src/icons/close.svg
 var close_default = "./close-4XJDSDVO.svg";
 
 // src/components/Select/SelectPro.tsx
@@ -609,8 +616,46 @@ var import_ThemeProvider = __toESM(require("@mui/material/styles/ThemeProvider")
 var import_createTheme = __toESM(require("@mui/material/styles/createTheme"));
 var import_CssBaseline = __toESM(require("@mui/material/CssBaseline"));
 var import_stylis = require("stylis");
+
+// src/styles/assets.ts
+var WINDOW_SIZE = {
+  xs: 0,
+  sm: 400,
+  md: 700,
+  lg: 1200,
+  xl: 1620
+};
+var _theme = {
+  typography: {
+    fontFamily: ["RockStar", "sans-serif"].join(","),
+    body1: {
+      fontSize: 14,
+      lineHeight: "22px"
+    }
+  },
+  breakpoints: {
+    values: {
+      xs: WINDOW_SIZE.xs,
+      sm: WINDOW_SIZE.sm,
+      md: WINDOW_SIZE.md,
+      lg: WINDOW_SIZE.lg,
+      xl: WINDOW_SIZE.xl
+    }
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          fontFamily: "RockStar, sans-serif"
+        }
+      }
+    }
+  }
+};
+
+// src/theme/index.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var theme = (0, import_createTheme.default)({});
+var theme = (0, import_createTheme.default)(__spreadValues({}, _theme));
 function ThemeRegistry(props) {
   const { children } = props;
   const [{ cache, flush }] = (0, import_react4.useState)(() => {
@@ -637,9 +682,7 @@ function ThemeRegistry(props) {
   });
   (0, import_navigation.useServerInsertedHTML)(() => {
     const names = flush();
-    if (names.length === 0) {
-      return null;
-    }
+    if (names.length === 0) return null;
     let styles = "";
     for (const name of names) {
       styles += cache.inserted[name];
@@ -661,6 +704,225 @@ function ThemeRegistry(props) {
   ] }) });
 }
 
+// src/styles/globals.scss
+var import_lit_element = require("lit-element/lit-element.js");
+var globals_default = import_lit_element.css`@tailwind base;
+@tailwind components;
+@tailwind utilities;
+.button {
+  width: fit-content;
+  padding: 12px 30px;
+  text-transform: unset;
+  border-radius: 0;
+  min-width: 145px;
+  font-size: 14px;
+  line-height: 16px;
+  box-shadow: none;
+}
+.button_dark {
+  background-color: #343434;
+  color: #fff;
+}
+.button_dark:hover {
+  background-color: #343434;
+}
+
+.border-gray {
+  border-color: #757575;
+}
+
+.border-dark {
+  border-color: #343434;
+}
+
+.border-gold {
+  border-color: #C8BCA1;
+}
+
+.border-gold2 {
+  border-color: #99835F;
+}
+
+.text-100 {
+  font-size: 100px;
+  line-height: 110px;
+}
+
+.text-40 {
+  font-size: 40px;
+  line-height: 48px;
+}
+
+.text-34 {
+  font-size: 34px;
+  line-height: 38px;
+}
+
+.text-10 {
+  font-size: 10px;
+  line-height: 12px;
+}
+
+.text-12 {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.text-16 {
+  font-size: 16px;
+  line-height: 19px;
+}
+
+.text-18 {
+  font-size: 18px;
+  line-height: 19px;
+}
+
+.text-light {
+  color: #fff;
+}
+
+.text-dark {
+  color: #343434;
+}
+
+.text-gold {
+  color: #C8BCA1;
+}
+
+.text-gray {
+  color: #757575;
+}
+
+.text-gray-light {
+  color: #F5F5F5;
+}
+
+.bg-gray-light {
+  background-color: #F5F5F5;
+}
+
+.bg-gray-medium {
+  background-color: #D0CED2;
+}
+
+.bg-gray {
+  background-color: #757575;
+}
+
+.bg-dark {
+  background-color: #343434;
+}
+
+.bg-light {
+  background-color: #fff;
+}
+
+.bg-gold {
+  background-color: #C8BCA1;
+}
+
+.customImage {
+  position: relative;
+}
+.customImage img {
+  object-position: center;
+  object-fit: cover;
+}
+
+@layer components {
+  .white-block-snack {
+    @apply bg-white px-[10px] py-[2px] w-fit font-extrabold text-12;
+  }
+  .black-block-snack {
+    @apply bg-dark py-[6px] px-[16px] w-fit text-white font-extrabold text-12;
+  }
+  .gray-block-snack {
+    @apply bg-gray-light px-[10px] w-fit;
+  }
+  .border-block-snack {
+    @apply px-[10px] py-[2px] text-12 border-[1px] border-dark w-fit;
+  }
+  .border-gold-block-snack {
+    @apply w-fit px-[10px] py-[2px] text-gray border-[1px] border-gold font-extrabold text-12 group-hover/card:text-white group-hover/card:bg-gold;
+  }
+}
+@layer components {
+  .nav-item.active {
+    @apply text-accent-beige;
+  }
+  .nav-item {
+    @apply p-2 text-accent-dark;
+    text-decoration: none;
+    cursor: pointer;
+    font-weight: 800;
+    font-size: 12px;
+    text-transform: uppercase;
+  }
+  .nav-indicator {
+    @apply absolute top-0 rounded-full bg-accent-beige;
+    width: 7px;
+    height: 7px;
+    transition: transform 0.3s ease-out;
+  }
+}
+@font-face {
+  font-family: RockStar;
+  src: url("fonts/RockStar/Rock Star_Regular_Web.woff2");
+  font-weight: 400;
+}
+@font-face {
+  font-family: RockStar;
+  src: url("fonts/RockStar/Rock Star_Extra Bold_Web.woff2");
+  font-weight: 800;
+}
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  color: #343434;
+  background-color: #F5F5F5;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  font-family: RockStar, sans-serif;
+}
+
+main {
+  flex-grow: 1;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+*:focus-visible {
+  outline: none;
+}
+
+@media screen and (min-width: 1200px) {
+  .MuiContainer-root {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+@media screen and (max-width: 1200px) {
+  .MuiContainer-root {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+}
+@media screen and (max-width: 700px) {
+  .MuiContainer-root {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}`;
+
 // src/providers/Providers.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var Providers = ({ children }) => {
@@ -698,8 +960,8 @@ var AppBar = ({ links }) => {
         ref: (el) => {
           navItemsRef.current[index] = el;
         },
-        href: link.href,
-        className: `nav-item ${index === activeIndex ? "active" : ""}`,
+        href: link.path,
+        className: `nav-item ${index === activeIndex ? "active" : ""} hover:text-accent-beige`,
         onClick: () => handleClick(index),
         children: link.title
       },
@@ -708,25 +970,224 @@ var AppBar = ({ links }) => {
   ] });
 };
 var AppBar_default = AppBar;
+
+// src/components/Image/ImageContainer.tsx
+var import_material13 = require("@mui/material");
+var import_image = __toESM(require("next/image"));
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ImageContainer = (props) => {
+  const {
+    src,
+    alt,
+    width = "w-full",
+    height = "h-full",
+    contentful = true,
+    priority = false,
+    loading = "lazy",
+    objectFit = "object-cover"
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_material13.Box, { className: `relative ${width} ${height}`, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_image.default,
+    {
+      className: `${objectFit} object-center`,
+      src: contentful ? `https:${src}` : src,
+      alt,
+      fill: true,
+      loading,
+      sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
+      priority
+    }
+  ) });
+};
+var ImageContainer_default = ImageContainer;
+
+// src/components/Card/CategoryCard.tsx
+var import_material14 = require("@mui/material");
+var import_link2 = __toESM(require("next/link"));
+
+// src/lib/assets.ts
+var NO_IMAGE = "/images/no-photo.svg";
+
+// src/components/Card/CategoryCard.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var CategoryCard = (props) => {
+  const { link, text, title, image_url = NO_IMAGE } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_link2.default, { href: link, className: "group/card", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_material14.Box, { className: "flex flex-col gap-[20px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ImageContainer_default, { src: image_url, alt: title, height: "h-[300px]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_material14.Box, { className: "flex flex-col px-[16px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        import_material14.Typography,
+        {
+          component: "span",
+          className: "font-extrabold text-16 group-hover/card:text-gold2",
+          children: title
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_material14.Typography, { component: "span", className: "group-hover/card:text-gold2", children: text })
+    ] })
+  ] }) });
+};
+var CategoryCard_default = CategoryCard;
+
+// src/components/Card/ArticleCard.tsx
+var import_link3 = __toESM(require("next/link"));
+var import_material15 = require("@mui/material");
+var import_Typography5 = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var ArticleCard = (props) => {
+  const { image_src = NO_IMAGE } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_link3.default, { href: "/", className: "group/card bg-gray-light", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      ImageContainer_default,
+      {
+        src: image_src,
+        alt: "test",
+        contentful: false,
+        height: "h-[220px]"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_material15.Box, { className: "pt-[24px] pl-[16px] pr-[50px] pb-[10px] flex flex-col gap-[6px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_Typography5.default,
+        {
+          component: "span",
+          className: "text-16 font-extrabold group-hover/card:text-gold2",
+          children: "\u041E\u0441\u043E\u0431\u043B\u0438\u0432\u043E\u0441\u0442\u0456 \u043A\u0443\u043F\u0456\u0432\u043B\u0456 \u0433\u043E\u0442\u0435\u043B\u044E"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        import_Typography5.default,
+        {
+          component: "span",
+          className: "text-gray group-hover/card:text-gold2",
+          children: "We have built a strong network in Dubai since 2009, which allows us to source the best deal for"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_Typography5.default, { component: "span", className: "border-gold-block-snack", children: "\u0422\u0435\u0433-\u043D\u0430\u0437\u0432\u0430" })
+    ] })
+  ] });
+};
+var ArticleCard_default = ArticleCard;
+
+// src/components/Card/JobCard.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var JobCard = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, {});
+};
+var JobCard_default = JobCard;
+
+// src/components/Card/RealtorCard.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var RealtorCard = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, {});
+};
+var RealtorCard_default = RealtorCard;
+
+// src/components/Card/RealtyCard.tsx
+var import_material16 = require("@mui/material");
+var import_link4 = __toESM(require("next/link"));
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var RealtyCard = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_link4.default, { href: "/", className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material16.Box, { className: "absolute left-[16px] top-[16px] flex flex-col gap-[9px] z-[1]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Chip_default, { view: "white", label: "id: 00154" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Chip_default, { view: "white", label: "\u0416\u041A: \u0421\u0443\u0447\u0430\u0441\u043D\u0438\u0439 \u043A\u0432\u0430\u0440\u0442\u0430\u043B4" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      ImageContainer_default,
+      {
+        src: "/images/test.png",
+        alt: "test",
+        height: "h-[260px]",
+        contentful: false
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material16.Box, { className: "bg-white py-[20px] px-[16px] flex flex-col gap-[6px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Chip_default, { view: "black", label: "120 000 \u20B4/\u043C\u0456\u0441\u044F\u0446\u044C" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { component: "span", className: "font-extrabold", children: "\u0432\u0443\u043B. \u0414\u0440\u0430\u0433\u043E\u043C\u0438\u0440\u043E\u0432\u0430 25" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { component: "span", className: "text-12", children: "\u041F\u0435\u0447\u0435\u0440\u0441\u044C\u043A\u0438\u0439 \u0440-\u043D" }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        Chip_default,
+        {
+          view: "silver",
+          label: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material16.Stack, { direction: "row", spacing: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { children: "\u043C\u0435\u0442\u0440\u043E:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_material16.Typography, { className: "font-extrabold", children: "\u041B\u0438\u0431\u0456\u0434\u0441\u044C\u043A\u0430" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_material16.Box, { className: "flex flex-wrap gap-[6px] mt-[6px]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Chip_default, { view: "line", label: "2 \u043A\u0456\u043C\u043D" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Chip_default, { view: "line", label: "60 \u043C\xB2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Chip_default, { view: "line", label: "\u043F\u043E\u0432\u0435\u0440\u0445: 3/24" })
+      ] })
+    ] })
+  ] });
+};
+var RealtyCard_default = RealtyCard;
+
+// src/components/Card/TeamPersonCard.tsx
+var import_material17 = require("@mui/material");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var TeamPersonCard = (props) => {
+  const { image_url = NO_IMAGE, name, position, text } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_material17.Box, { className: "group/card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_material17.Box, { className: "relative h-[300px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Box, { className: "w-full h-full bg-gray-medium group-hover/card:brightness-[50%]", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        ImageContainer_default,
+        {
+          contentful: false,
+          src: image_url,
+          alt: name,
+          objectFit: "object-contain"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_material17.Box, { className: "hidden absolute top-[110px] left-[30px] right-[30px] group-hover/card:flex flex-col text-white", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Typography, { component: "span", className: "text-16 font-extrabold", children: position }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Typography, { component: "span", className: "mt-[4px]", children: name }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          import_material17.Typography,
+          {
+            component: "span",
+            className: "mt-[11px] text-12 !leading-[16px]",
+            children: text
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_material17.Box, { className: "mt-[20px] text-center mx-auto flex flex-col w-10/12", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Typography, { component: "span", className: "text-16 font-extrabold", children: position }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_material17.Typography, { component: "span", className: "text-gray", children: name })
+    ] })
+  ] });
+};
+var TeamPersonCard_default = TeamPersonCard;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppBar,
+  ArticleCard,
   Avatar,
   Badge,
   Button,
+  CategoryCard,
   Chip,
   FromToInput,
   Greet,
   IconButton,
+  ImageContainer,
   Input,
+  JobCard,
   MenuItem,
   PhoneInput,
   Providers,
   Radio,
   RadioGroup,
+  RealtorCard,
+  RealtyCard,
   Select,
   SelectPro,
   Slider,
   Switch,
+  TeamPersonCard,
   Text
 });

package/dist/index.mjs

@@ -109,7 +109,7 @@ var IconButton_default = IconButton;
 import { useRef, useState, useEffect } from "react";
 import { Select, styled as styled3 } from "@mui/material";
 
-// src/assets/dropdown-arrow.svg
+// src/icons/dropdown-arrow.svg
 var dropdown_arrow_default = "./dropdown-arrow-CDZAF5GJ.svg";
 
 // src/components/Select/Select.tsx
@@ -197,7 +197,7 @@ var CustomSelect = (props) => {
 };
 var Select_default = CustomSelect;
 
-// src/assets/search.svg
+// src/icons/search.svg
 var search_default = "./search-HJGCO2DZ.svg";
 
 // src/components/Select/SelectPro.tsx
@@ -214,7 +214,7 @@ import {
   Button as Button2
 } from "@mui/material";
 
-// src/assets/close.svg
+// src/icons/close.svg
 var close_default = "./close-4XJDSDVO.svg";
 
 // src/components/Select/SelectPro.tsx
@@ -568,8 +568,46 @@ import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import createTheme from "@mui/material/styles/createTheme";
 import CssBaseline from "@mui/material/CssBaseline";
 import { prefixer } from "stylis";
+
+// src/styles/assets.ts
+var WINDOW_SIZE = {
+  xs: 0,
+  sm: 400,
+  md: 700,
+  lg: 1200,
+  xl: 1620
+};
+var _theme = {
+  typography: {
+    fontFamily: ["RockStar", "sans-serif"].join(","),
+    body1: {
+      fontSize: 14,
+      lineHeight: "22px"
+    }
+  },
+  breakpoints: {
+    values: {
+      xs: WINDOW_SIZE.xs,
+      sm: WINDOW_SIZE.sm,
+      md: WINDOW_SIZE.md,
+      lg: WINDOW_SIZE.lg,
+      xl: WINDOW_SIZE.xl
+    }
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          fontFamily: "RockStar, sans-serif"
+        }
+      }
+    }
+  }
+};
+
+// src/theme/index.tsx
 import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
-var theme = createTheme({});
+var theme = createTheme(__spreadValues({}, _theme));
 function ThemeRegistry(props) {
   const { children } = props;
   const [{ cache, flush }] = useState3(() => {
@@ -596,9 +634,7 @@ function ThemeRegistry(props) {
   });
   useServerInsertedHTML(() => {
     const names = flush();
-    if (names.length === 0) {
-      return null;
-    }
+    if (names.length === 0) return null;
     let styles = "";
     for (const name of names) {
       styles += cache.inserted[name];
@@ -620,6 +656,225 @@ function ThemeRegistry(props) {
   ] }) });
 }
 
+// src/styles/globals.scss
+import { css } from "lit-element/lit-element.js";
+var globals_default = css`@tailwind base;
+@tailwind components;
+@tailwind utilities;
+.button {
+  width: fit-content;
+  padding: 12px 30px;
+  text-transform: unset;
+  border-radius: 0;
+  min-width: 145px;
+  font-size: 14px;
+  line-height: 16px;
+  box-shadow: none;
+}
+.button_dark {
+  background-color: #343434;
+  color: #fff;
+}
+.button_dark:hover {
+  background-color: #343434;
+}
+
+.border-gray {
+  border-color: #757575;
+}
+
+.border-dark {
+  border-color: #343434;
+}
+
+.border-gold {
+  border-color: #C8BCA1;
+}
+
+.border-gold2 {
+  border-color: #99835F;
+}
+
+.text-100 {
+  font-size: 100px;
+  line-height: 110px;
+}
+
+.text-40 {
+  font-size: 40px;
+  line-height: 48px;
+}
+
+.text-34 {
+  font-size: 34px;
+  line-height: 38px;
+}
+
+.text-10 {
+  font-size: 10px;
+  line-height: 12px;
+}
+
+.text-12 {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.text-16 {
+  font-size: 16px;
+  line-height: 19px;
+}
+
+.text-18 {
+  font-size: 18px;
+  line-height: 19px;
+}
+
+.text-light {
+  color: #fff;
+}
+
+.text-dark {
+  color: #343434;
+}
+
+.text-gold {
+  color: #C8BCA1;
+}
+
+.text-gray {
+  color: #757575;
+}
+
+.text-gray-light {
+  color: #F5F5F5;
+}
+
+.bg-gray-light {
+  background-color: #F5F5F5;
+}
+
+.bg-gray-medium {
+  background-color: #D0CED2;
+}
+
+.bg-gray {
+  background-color: #757575;
+}
+
+.bg-dark {
+  background-color: #343434;
+}
+
+.bg-light {
+  background-color: #fff;
+}
+
+.bg-gold {
+  background-color: #C8BCA1;
+}
+
+.customImage {
+  position: relative;
+}
+.customImage img {
+  object-position: center;
+  object-fit: cover;
+}
+
+@layer components {
+  .white-block-snack {
+    @apply bg-white px-[10px] py-[2px] w-fit font-extrabold text-12;
+  }
+  .black-block-snack {
+    @apply bg-dark py-[6px] px-[16px] w-fit text-white font-extrabold text-12;
+  }
+  .gray-block-snack {
+    @apply bg-gray-light px-[10px] w-fit;
+  }
+  .border-block-snack {
+    @apply px-[10px] py-[2px] text-12 border-[1px] border-dark w-fit;
+  }
+  .border-gold-block-snack {
+    @apply w-fit px-[10px] py-[2px] text-gray border-[1px] border-gold font-extrabold text-12 group-hover/card:text-white group-hover/card:bg-gold;
+  }
+}
+@layer components {
+  .nav-item.active {
+    @apply text-accent-beige;
+  }
+  .nav-item {
+    @apply p-2 text-accent-dark;
+    text-decoration: none;
+    cursor: pointer;
+    font-weight: 800;
+    font-size: 12px;
+    text-transform: uppercase;
+  }
+  .nav-indicator {
+    @apply absolute top-0 rounded-full bg-accent-beige;
+    width: 7px;
+    height: 7px;
+    transition: transform 0.3s ease-out;
+  }
+}
+@font-face {
+  font-family: RockStar;
+  src: url("fonts/RockStar/Rock Star_Regular_Web.woff2");
+  font-weight: 400;
+}
+@font-face {
+  font-family: RockStar;
+  src: url("fonts/RockStar/Rock Star_Extra Bold_Web.woff2");
+  font-weight: 800;
+}
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  color: #343434;
+  background-color: #F5F5F5;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  font-family: RockStar, sans-serif;
+}
+
+main {
+  flex-grow: 1;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+*:focus-visible {
+  outline: none;
+}
+
+@media screen and (min-width: 1200px) {
+  .MuiContainer-root {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+@media screen and (max-width: 1200px) {
+  .MuiContainer-root {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+}
+@media screen and (max-width: 700px) {
+  .MuiContainer-root {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}`;
+
 // src/providers/Providers.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
 var Providers = ({ children }) => {
@@ -657,8 +912,8 @@ var AppBar = ({ links }) => {
         ref: (el) => {
           navItemsRef.current[index] = el;
         },
-        href: link.href,
-        className: `nav-item ${index === activeIndex ? "active" : ""}`,
+        href: link.path,
+        className: `nav-item ${index === activeIndex ? "active" : ""} hover:text-accent-beige`,
         onClick: () => handleClick(index),
         children: link.title
       },
@@ -667,24 +922,223 @@ var AppBar = ({ links }) => {
   ] });
 };
 var AppBar_default = AppBar;
+
+// src/components/Image/ImageContainer.tsx
+import { Box as Box3 } from "@mui/material";
+import Image from "next/image";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var ImageContainer = (props) => {
+  const {
+    src,
+    alt,
+    width = "w-full",
+    height = "h-full",
+    contentful = true,
+    priority = false,
+    loading = "lazy",
+    objectFit = "object-cover"
+  } = props;
+  return /* @__PURE__ */ jsx20(Box3, { className: `relative ${width} ${height}`, children: /* @__PURE__ */ jsx20(
+    Image,
+    {
+      className: `${objectFit} object-center`,
+      src: contentful ? `https:${src}` : src,
+      alt,
+      fill: true,
+      loading,
+      sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
+      priority
+    }
+  ) });
+};
+var ImageContainer_default = ImageContainer;
+
+// src/components/Card/CategoryCard.tsx
+import { Box as Box4, Typography as Typography6 } from "@mui/material";
+import Link2 from "next/link";
+
+// src/lib/assets.ts
+var NO_IMAGE = "/images/no-photo.svg";
+
+// src/components/Card/CategoryCard.tsx
+import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+var CategoryCard = (props) => {
+  const { link, text, title, image_url = NO_IMAGE } = props;
+  return /* @__PURE__ */ jsx21(Link2, { href: link, className: "group/card", children: /* @__PURE__ */ jsxs7(Box4, { className: "flex flex-col gap-[20px]", children: [
+    /* @__PURE__ */ jsx21(ImageContainer_default, { src: image_url, alt: title, height: "h-[300px]" }),
+    /* @__PURE__ */ jsxs7(Box4, { className: "flex flex-col px-[16px]", children: [
+      /* @__PURE__ */ jsx21(
+        Typography6,
+        {
+          component: "span",
+          className: "font-extrabold text-16 group-hover/card:text-gold2",
+          children: title
+        }
+      ),
+      /* @__PURE__ */ jsx21(Typography6, { component: "span", className: "group-hover/card:text-gold2", children: text })
+    ] })
+  ] }) });
+};
+var CategoryCard_default = CategoryCard;
+
+// src/components/Card/ArticleCard.tsx
+import Link3 from "next/link";
+import { Box as Box5 } from "@mui/material";
+import Typography7 from "@mui/material/Typography";
+import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+var ArticleCard = (props) => {
+  const { image_src = NO_IMAGE } = props;
+  return /* @__PURE__ */ jsxs8(Link3, { href: "/", className: "group/card bg-gray-light", children: [
+    /* @__PURE__ */ jsx22(
+      ImageContainer_default,
+      {
+        src: image_src,
+        alt: "test",
+        contentful: false,
+        height: "h-[220px]"
+      }
+    ),
+    /* @__PURE__ */ jsxs8(Box5, { className: "pt-[24px] pl-[16px] pr-[50px] pb-[10px] flex flex-col gap-[6px]", children: [
+      /* @__PURE__ */ jsx22(
+        Typography7,
+        {
+          component: "span",
+          className: "text-16 font-extrabold group-hover/card:text-gold2",
+          children: "\u041E\u0441\u043E\u0431\u043B\u0438\u0432\u043E\u0441\u0442\u0456 \u043A\u0443\u043F\u0456\u0432\u043B\u0456 \u0433\u043E\u0442\u0435\u043B\u044E"
+        }
+      ),
+      /* @__PURE__ */ jsx22(
+        Typography7,
+        {
+          component: "span",
+          className: "text-gray group-hover/card:text-gold2",
+          children: "We have built a strong network in Dubai since 2009, which allows us to source the best deal for"
+        }
+      ),
+      /* @__PURE__ */ jsx22(Typography7, { component: "span", className: "border-gold-block-snack", children: "\u0422\u0435\u0433-\u043D\u0430\u0437\u0432\u0430" })
+    ] })
+  ] });
+};
+var ArticleCard_default = ArticleCard;
+
+// src/components/Card/JobCard.tsx
+import { Fragment, jsx as jsx23 } from "react/jsx-runtime";
+var JobCard = () => {
+  return /* @__PURE__ */ jsx23(Fragment, {});
+};
+var JobCard_default = JobCard;
+
+// src/components/Card/RealtorCard.tsx
+import { Fragment as Fragment2, jsx as jsx24 } from "react/jsx-runtime";
+var RealtorCard = () => {
+  return /* @__PURE__ */ jsx24(Fragment2, {});
+};
+var RealtorCard_default = RealtorCard;
+
+// src/components/Card/RealtyCard.tsx
+import { Box as Box6, Stack as Stack4, Typography as Typography8 } from "@mui/material";
+import Link4 from "next/link";
+import { jsx as jsx25, jsxs as jsxs9 } from "react/jsx-runtime";
+var RealtyCard = () => {
+  return /* @__PURE__ */ jsxs9(Link4, { href: "/", className: "relative", children: [
+    /* @__PURE__ */ jsxs9(Box6, { className: "absolute left-[16px] top-[16px] flex flex-col gap-[9px] z-[1]", children: [
+      /* @__PURE__ */ jsx25(Chip_default, { view: "white", label: "id: 00154" }),
+      /* @__PURE__ */ jsx25(Chip_default, { view: "white", label: "\u0416\u041A: \u0421\u0443\u0447\u0430\u0441\u043D\u0438\u0439 \u043A\u0432\u0430\u0440\u0442\u0430\u043B4" })
+    ] }),
+    /* @__PURE__ */ jsx25(
+      ImageContainer_default,
+      {
+        src: "/images/test.png",
+        alt: "test",
+        height: "h-[260px]",
+        contentful: false
+      }
+    ),
+    /* @__PURE__ */ jsxs9(Box6, { className: "bg-white py-[20px] px-[16px] flex flex-col gap-[6px]", children: [
+      /* @__PURE__ */ jsx25(Chip_default, { view: "black", label: "120 000 \u20B4/\u043C\u0456\u0441\u044F\u0446\u044C" }),
+      /* @__PURE__ */ jsx25(Typography8, { component: "span", className: "font-extrabold", children: "\u0432\u0443\u043B. \u0414\u0440\u0430\u0433\u043E\u043C\u0438\u0440\u043E\u0432\u0430 25" }),
+      /* @__PURE__ */ jsx25(Typography8, { component: "span", className: "text-12", children: "\u041F\u0435\u0447\u0435\u0440\u0441\u044C\u043A\u0438\u0439 \u0440-\u043D" }),
+      /* @__PURE__ */ jsx25(
+        Chip_default,
+        {
+          view: "silver",
+          label: /* @__PURE__ */ jsxs9(Stack4, { direction: "row", spacing: 1, children: [
+            /* @__PURE__ */ jsx25(Typography8, { children: "\u043C\u0435\u0442\u0440\u043E:" }),
+            /* @__PURE__ */ jsx25(Typography8, { className: "font-extrabold", children: "\u041B\u0438\u0431\u0456\u0434\u0441\u044C\u043A\u0430" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs9(Box6, { className: "flex flex-wrap gap-[6px] mt-[6px]", children: [
+        /* @__PURE__ */ jsx25(Chip_default, { view: "line", label: "2 \u043A\u0456\u043C\u043D" }),
+        /* @__PURE__ */ jsx25(Chip_default, { view: "line", label: "60 \u043C\xB2" }),
+        /* @__PURE__ */ jsx25(Chip_default, { view: "line", label: "\u043F\u043E\u0432\u0435\u0440\u0445: 3/24" })
+      ] })
+    ] })
+  ] });
+};
+var RealtyCard_default = RealtyCard;
+
+// src/components/Card/TeamPersonCard.tsx
+import { Box as Box7, Typography as Typography9 } from "@mui/material";
+import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+var TeamPersonCard = (props) => {
+  const { image_url = NO_IMAGE, name, position, text } = props;
+  return /* @__PURE__ */ jsxs10(Box7, { className: "group/card", children: [
+    /* @__PURE__ */ jsxs10(Box7, { className: "relative h-[300px]", children: [
+      /* @__PURE__ */ jsx26(Box7, { className: "w-full h-full bg-gray-medium group-hover/card:brightness-[50%]", children: /* @__PURE__ */ jsx26(
+        ImageContainer_default,
+        {
+          contentful: false,
+          src: image_url,
+          alt: name,
+          objectFit: "object-contain"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs10(Box7, { className: "hidden absolute top-[110px] left-[30px] right-[30px] group-hover/card:flex flex-col text-white", children: [
+        /* @__PURE__ */ jsx26(Typography9, { component: "span", className: "text-16 font-extrabold", children: position }),
+        /* @__PURE__ */ jsx26(Typography9, { component: "span", className: "mt-[4px]", children: name }),
+        /* @__PURE__ */ jsx26(
+          Typography9,
+          {
+            component: "span",
+            className: "mt-[11px] text-12 !leading-[16px]",
+            children: text
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs10(Box7, { className: "mt-[20px] text-center mx-auto flex flex-col w-10/12", children: [
+      /* @__PURE__ */ jsx26(Typography9, { component: "span", className: "text-16 font-extrabold", children: position }),
+      /* @__PURE__ */ jsx26(Typography9, { component: "span", className: "text-gray", children: name })
+    ] })
+  ] });
+};
+var TeamPersonCard_default = TeamPersonCard;
 export {
   AppBar_default as AppBar,
+  ArticleCard_default as ArticleCard,
   Avatar_default as Avatar,
   Badge_default as Badge,
   Button_default as Button,
+  CategoryCard_default as CategoryCard,
   Chip_default as Chip,
   FromToInput_default as FromToInput,
   Greet,
   IconButton_default as IconButton,
+  ImageContainer_default as ImageContainer,
   Input_default as Input,
+  JobCard_default as JobCard,
   MenuItem_default as MenuItem,
   PhoneInput_default as PhoneInput,
   Providers_default as Providers,
   Radio_default as Radio,
   RadioGroup_default as RadioGroup,
+  RealtorCard_default as RealtorCard,
+  RealtyCard_default as RealtyCard,
   Select_default as Select,
   SelectPro_default as SelectPro,
   Slider_default as Slider,
   Switch_default as Switch,
+  TeamPersonCard_default as TeamPersonCard,
   Text_default as Text
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mayak-common-library",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -21,6 +21,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.52.0",
     "react-number-format": "^5.4.0",
+    "sass": "^1.77.7",
     "stylis": "^4.3.2",
     "tailwindcss": "^3.4.4"
   },
@@ -31,6 +32,7 @@
     "@types/react-dom": "^18",
     "@types/stylis": "^4.2.6",
     "autoprefixer": "^10.4.19",
+    "esbuild-sass-plugin": "^3.3.1",
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
     "install": "^0.13.0",

package/tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
@@ -20,6 +21,8 @@ module.exports = {
         "accent-beige": "#C8BCA1",
         "accent-silver": "#F5F5F5",
         "accent-silver-2": "#939393",
+        gold2: "#99835F",
+        gold: "#C8BCA1",
         primary: {
           light: "#EAEDF6",
           main: "#3041C7",
@@ -30,5 +33,10 @@ module.exports = {
       },
     },
   },
+  variants: {
+    extend: {
+      textColor: ["group-hover"],
+    },
+  },
   plugins: [],
 };