stay_commerce-frontend 0.1.0

data/app/javascript/react/shared/FormField/FormField.jsx

@@ -0,0 +1,75 @@
+
+import React from "react";
+import "../../styles/formfield.scss";
+
+const FormField = ({
+  label,
+  name,
+  type = "text",
+  value,
+  placeholder = "",
+  onChange,
+  onBlur,
+  error,
+  options = [],
+  disabled = false,
+  rowIntextArea = 3,
+}) => {
+  // Generate a unique id for each input based on the name, if not already provided
+  const id = name || `input-${Math.random().toString(36).substr(2, 9)}`;
+
+  return (
+    <div className="form-field">
+      {label && <label htmlFor={id}>{label}</label>}
+
+      {type === "select" ? (
+        <select
+          className="input"
+          id={id}
+          name={name}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          disabled={disabled}
+        >
+          <option value="" disabled>
+            Select
+          </option>
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      ) : type === "textarea" ? (
+        <textarea
+          className="input textarea"
+          id={id}
+          name={name}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          disabled={disabled}
+          rows={rowIntextArea}
+          placeholder={placeholder}
+        />
+      ) : (
+        <input
+          className="input"
+          id={id}
+          name={name}
+          type={type}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          disabled={disabled}
+          placeholder={placeholder}
+        />
+      )}
+
+      {error && <p className="error-text">{error}</p>}
+    </div>
+  );
+};
+
+export default FormField;

data/app/javascript/react/shared/FormItem/FormItem.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import Label from "../Label/Label";
+import "../../styles/formitem.scss";
+
+const FormItem = ({
+  children,
+  className = "",
+  label,
+  desc,
+}) => {
+  return (
+    <div className={`form-item ${className}`}>
+      {label && <Label>{label}</Label>}
+      <div className="form-item__content">{children}</div>
+      {desc && <span className="form-item__desc">{desc}</span>}
+    </div>
+  );
+};
+
+export default FormItem;

data/app/javascript/react/shared/Input/Input.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import "../../styles/input.scss";
+
+const Input = React.forwardRef(
+  (
+    {
+      className = "",
+      sizeClass = "medium", // options: small, medium, large
+      fontClass = "normal", // options: normal, bold, etc.
+      rounded = "rounded", // options: rounded, sharp
+      type = "text",
+      ...args
+    },
+    ref
+  ) => {
+    return (
+      <input
+        ref={ref}
+        type={type}
+        className={`nc-Input ${sizeClass} ${fontClass} ${rounded} ${className}`}
+        {...args}
+      />
+    );
+  }
+);
+
+export default Input;

data/app/javascript/react/shared/Label/Label.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import "../../styles/label.scss";
+
+const Label = ({ className = "", children }) => {
+  return (
+    <label className={`nc-Label ${className}`} data-nc-id="Label">
+      {children}
+    </label>
+  );
+};
+
+export default Label;

data/app/javascript/react/shared/Modal.jsx

@@ -0,0 +1,20 @@
+// components/Modal.tsx
+import React from "react";
+import "../styles/Modal.scss"; // Ensure you have styles for the modal
+
+const Modal = ({ isOpen, onClose, children }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-overlay">
+      <div className="modal-container">
+        <button className="modal-close" onClick={onClose}>
+          ✕
+        </button>
+        <div className="modal-content">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

data/app/javascript/react/shared/NcImage/NcImage.jsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useRef, useState } from "react";
+import checkInViewIntersectionObserver from "../../utils/helpers/isInViewPortIntersectionObserver";
+import "react-medium-image-zoom/dist/styles.css";
+import "../../styles/ncimage.scss";
+import { PlayCircleIcon } from "lucide-react";
+
+const NcImage = ({
+  containerClassName = "",
+  alt = "nc-imgs",
+  src = "",
+  fallbackSrc = "https://argauto.lv/application/modules/themes/views/default/assets/images/image-placeholder.png",
+  className = "object-cover w-full h-full",
+  ...args
+}) => {
+  let isMounted = false;
+  const _containerRef = useRef(null);
+  let _imageEl = null;
+
+  const [__src, set__src] = useState("");
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  const _initActions = async () => {
+    _checkInViewPort();
+  };
+
+  const _checkInViewPort = () => {
+    if (!_containerRef.current) return;
+    checkInViewIntersectionObserver({
+      target: _containerRef.current,
+      options: {
+        root: null,
+        rootMargin: "0%",
+        threshold: 0,
+      },
+      freezeOnceVisible: true,
+      callback: _imageOnViewPort,
+    });
+  };
+
+  const _imageOnViewPort = () => {
+    if (!src) {
+      _handleImageLoaded();
+      return true;
+    }
+    _imageEl = new Image();
+    if (_imageEl) {
+      _imageEl.src = src;
+      _imageEl.addEventListener("load", _handleImageLoaded);
+      _imageEl.addEventListener("error", _handleImageError);
+    }
+    return true;
+  };
+
+  const _handleImageLoaded = () => {
+    if (!isMounted) return;
+    setImageLoaded(true);
+    set__src(src);
+  };
+
+  const _handleImageError = () => {
+    if (!isMounted) return;
+    set__src(fallbackSrc);
+    setImageLoaded(true);
+  };
+
+  useEffect(() => {
+    isMounted = true;
+    _initActions();
+    return () => {
+      isMounted = false;
+    };
+  }, [src]);
+
+  const renderLoadingPlaceholder = () => {
+    return (
+      <div className={`nc-image__placeholder ${className}`}>
+        <div className="nc-image__icon">
+          <PlayCircleIcon />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={`nc-image ${containerClassName}`} ref={_containerRef}>
+      {__src && imageLoaded ? (
+        <img
+          src={__src || fallbackSrc}
+          className={className}
+          alt={alt}
+          onError={_handleImageError}
+          {...args}
+        />
+      ) : (
+        renderLoadingPlaceholder()
+      )}
+    </div>
+  );
+};
+
+export default NcImage;

data/app/javascript/react/shared/NcImage/PlaceIcon.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+const PlaceIcon = () => {
+    return (
+      <svg
+        className="w-full h-full"
+        viewBox="0 0 197 193"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M145.828 48.9822C134.953 48.9822 126.105 57.8301 126.105 68.7051C126.105 79.5801 134.953 88.428 145.828 88.428C156.703 88.428 165.551 79.5805 165.551 68.7051C165.551 57.8293 156.704 48.9822 145.828 48.9822ZM145.828 80.7741C139.173 80.7741 133.759 75.3602 133.759 68.7051C133.759 62.0501 139.173 56.6361 145.828 56.6361C152.483 56.6361 157.897 62.0501 157.897 68.7051C157.897 75.3594 152.483 80.7741 145.828 80.7741Z"
+          fill="currentColor"
+        />
+        <path
+          d="M145.963 171.49C145.867 171.256 145.748 171.034 145.611 170.828C145.473 170.617 145.312 170.422 145.136 170.246C144.96 170.07 144.765 169.909 144.554 169.771C144.348 169.634 144.126 169.515 143.892 169.419C143.663 169.324 143.422 169.247 143.177 169.201C142.683 169.102 142.178 169.102 141.684 169.201C141.439 169.247 141.198 169.324 140.969 169.419C140.735 169.515 140.513 169.634 140.306 169.771C140.096 169.909 139.901 170.07 139.725 170.246C139.549 170.422 139.388 170.617 139.25 170.828C139.112 171.034 138.994 171.256 138.898 171.49C138.802 171.719 138.726 171.96 138.68 172.205C138.63 172.45 138.603 172.703 138.603 172.952C138.603 173.2 138.63 173.453 138.68 173.698C138.726 173.943 138.802 174.184 138.898 174.413C138.994 174.647 139.112 174.869 139.25 175.075C139.388 175.286 139.549 175.481 139.725 175.657C139.812 175.745 139.905 175.829 140.001 175.908C140.099 175.987 140.201 176.063 140.306 176.132C140.513 176.269 140.735 176.388 140.969 176.484C141.198 176.579 141.439 176.656 141.684 176.702C141.929 176.752 142.182 176.778 142.43 176.778C142.679 176.778 142.932 176.752 143.177 176.702C143.422 176.656 143.663 176.579 143.892 176.484C144.126 176.388 144.348 176.269 144.554 176.132C144.66 176.062 144.762 175.987 144.859 175.908C144.956 175.829 145.048 175.745 145.136 175.657C145.312 175.481 145.473 175.286 145.611 175.075C145.748 174.869 145.867 174.647 145.963 174.413C146.058 174.184 146.135 173.943 146.185 173.698C146.234 173.453 146.257 173.2 146.257 172.952C146.257 172.703 146.234 172.45 146.185 172.205C146.135 171.96 146.058 171.719 145.963 171.49Z"
+          fill="currentColor"
+        />
+        <path
+          d="M85.7341 20.0459C85.6384 19.8163 85.5198 19.5943 85.382 19.3838C85.2442 19.1772 85.0835 18.9782 84.9075 18.8021C84.7314 18.6261 84.5363 18.4653 84.3258 18.3276C84.1191 18.1898 83.8972 18.0712 83.6637 17.9755C83.4341 17.8798 83.193 17.8071 82.9481 17.7574C82.4544 17.6579 81.9492 17.6579 81.4556 17.7574C81.2106 17.8071 80.9695 17.8798 80.7361 17.9755C80.5065 18.0712 80.2845 18.1898 80.0779 18.3276C79.8674 18.4653 79.6722 18.6261 79.4962 18.8021C79.3201 18.9782 79.1594 19.1772 79.0178 19.3838C78.88 19.5943 78.7652 19.8163 78.6696 20.0459C78.5739 20.2755 78.4973 20.5166 78.4514 20.7615C78.4017 21.0103 78.3749 21.259 78.3749 21.5116C78.3749 21.7603 78.4017 22.0091 78.4514 22.2579C78.4973 22.5028 78.5739 22.7439 78.6696 22.9735C78.7652 23.2031 78.88 23.4251 79.0178 23.6356C79.1594 23.8422 79.3201 24.0412 79.4962 24.2172C79.6722 24.3933 79.8674 24.554 80.0779 24.6918C80.2845 24.8296 80.5065 24.9482 80.7361 25.0439C80.9695 25.1395 81.2106 25.2123 81.4556 25.262C81.7005 25.3118 81.9531 25.3385 82.2018 25.3385C82.4506 25.3385 82.7032 25.3118 82.9481 25.262C83.193 25.2123 83.4341 25.1395 83.6637 25.0439C83.8972 24.9482 84.1191 24.8296 84.3258 24.6918C84.5363 24.554 84.7314 24.3933 84.9075 24.2172C85.0835 24.0412 85.2442 23.8422 85.382 23.6356C85.5198 23.4251 85.6384 23.2031 85.7341 22.9735C85.8298 22.7439 85.9063 22.5028 85.9522 22.2579C86.002 22.0091 86.0288 21.7603 86.0288 21.5116C86.0288 21.259 86.002 21.0103 85.9522 20.7615C85.9063 20.5166 85.8298 20.2755 85.7341 20.0459Z"
+          fill="currentColor"
+        />
+        <path
+          d="M175.008 17.6988C172.714 7.99787 163.987 0.755371 153.594 0.755371H33.522C15.2866 0.754988 0.450684 15.5909 0.450684 33.8263V153.899C0.450684 165.824 9.98628 175.557 21.8326 175.891C24.1272 185.592 32.8542 192.835 43.2467 192.835H174.382C186.517 192.835 196.39 182.962 196.39 170.826V141.949V39.6911C196.39 27.7663 186.855 18.0329 175.008 17.6988ZM188.736 170.827C188.736 178.742 182.297 185.182 174.382 185.182H43.2467C37.1197 185.182 31.8799 181.322 29.8236 175.908C29.2232 174.327 28.8918 172.615 28.8918 170.827V168.254V150.524L72.7964 76.0808C74.1332 73.8144 76.517 72.4911 79.1323 72.5332C81.7633 72.5783 84.0851 73.9844 85.3434 76.2955L104.247 111.007L131.725 161.462C132.419 162.737 133.733 163.459 135.089 163.459C135.708 163.459 136.335 163.309 136.916 162.993C138.772 161.982 139.458 159.657 138.447 157.801L129.53 141.428C133.445 141.608 137.296 140.341 140.362 137.797L157.572 123.52C160.332 121.23 164.408 121.331 167.051 123.755L167.95 124.578L175.604 131.594L188.736 143.632V170.827ZM188.736 133.249L175.603 121.21L167.95 115.382C162.963 113.297 157.033 114.022 152.685 117.629L135.475 131.906C133.582 133.476 131.111 134.111 128.695 133.646C126.28 133.183 124.22 131.677 123.043 129.517L110.969 107.345L104.226 94.9648V94.9644L92.0655 72.6342C89.4716 67.8716 84.6856 64.9727 79.2632 64.8801C73.8423 64.7951 68.9588 67.521 66.2037 72.1922L28.8914 135.457V39.6911C28.8914 31.7758 35.331 25.3362 43.2463 25.3362H66.8937C69.0074 25.3362 70.7207 23.6229 70.7207 21.5093C70.7207 19.3957 69.0074 17.6823 66.8937 17.6823H43.2463C31.1106 17.6823 21.2375 27.5555 21.2375 39.6911V149.479V168.198C13.8924 167.575 8.10458 161.402 8.10458 153.899V33.8263C8.10458 19.8109 19.507 8.40888 33.522 8.40888H153.594C159.721 8.40888 164.961 12.2684 167.017 17.6827H97.5093C95.3957 17.6827 93.6824 19.396 93.6824 21.5097C93.6824 23.6233 95.3957 25.3366 97.5093 25.3366H167.949L175.603 25.3925C182.949 26.0147 188.736 32.1876 188.736 39.6911V133.249Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  };
+  
+  export default PlaceIcon;

data/app/javascript/react/shared/NcImage/placecImageIcon.svg

@@ -0,0 +1,6 @@
+<svg width="197" height="193" viewBox="0 0 197 193" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M145.828 48.9822C134.953 48.9822 126.105 57.8301 126.105 68.7051C126.105 79.5801 134.953 88.428 145.828 88.428C156.703 88.428 165.551 79.5805 165.551 68.7051C165.551 57.8293 156.704 48.9822 145.828 48.9822ZM145.828 80.7741C139.173 80.7741 133.759 75.3602 133.759 68.7051C133.759 62.0501 139.173 56.6361 145.828 56.6361C152.483 56.6361 157.897 62.0501 157.897 68.7051C157.897 75.3594 152.483 80.7741 145.828 80.7741Z" fill="#DADADA"/>
+<path d="M145.963 171.49C145.867 171.256 145.748 171.034 145.611 170.828C145.473 170.617 145.312 170.422 145.136 170.246C144.96 170.07 144.765 169.909 144.554 169.771C144.348 169.634 144.126 169.515 143.892 169.419C143.663 169.324 143.422 169.247 143.177 169.201C142.683 169.102 142.178 169.102 141.684 169.201C141.439 169.247 141.198 169.324 140.969 169.419C140.735 169.515 140.513 169.634 140.306 169.771C140.096 169.909 139.901 170.07 139.725 170.246C139.549 170.422 139.388 170.617 139.25 170.828C139.112 171.034 138.994 171.256 138.898 171.49C138.802 171.719 138.726 171.96 138.68 172.205C138.63 172.45 138.603 172.703 138.603 172.952C138.603 173.2 138.63 173.453 138.68 173.698C138.726 173.943 138.802 174.184 138.898 174.413C138.994 174.647 139.112 174.869 139.25 175.075C139.388 175.286 139.549 175.481 139.725 175.657C139.812 175.745 139.905 175.829 140.001 175.908C140.099 175.987 140.201 176.063 140.306 176.132C140.513 176.269 140.735 176.388 140.969 176.484C141.198 176.579 141.439 176.656 141.684 176.702C141.929 176.752 142.182 176.778 142.43 176.778C142.679 176.778 142.932 176.752 143.177 176.702C143.422 176.656 143.663 176.579 143.892 176.484C144.126 176.388 144.348 176.269 144.554 176.132C144.66 176.062 144.762 175.987 144.859 175.908C144.956 175.829 145.048 175.745 145.136 175.657C145.312 175.481 145.473 175.286 145.611 175.075C145.748 174.869 145.867 174.647 145.963 174.413C146.058 174.184 146.135 173.943 146.185 173.698C146.234 173.453 146.257 173.2 146.257 172.952C146.257 172.703 146.234 172.45 146.185 172.205C146.135 171.96 146.058 171.719 145.963 171.49Z" fill="#DADADA"/>
+<path d="M85.7341 20.0459C85.6384 19.8163 85.5198 19.5943 85.382 19.3838C85.2442 19.1772 85.0835 18.9782 84.9075 18.8021C84.7314 18.6261 84.5363 18.4653 84.3258 18.3276C84.1191 18.1898 83.8972 18.0712 83.6637 17.9755C83.4341 17.8798 83.193 17.8071 82.9481 17.7574C82.4544 17.6579 81.9492 17.6579 81.4556 17.7574C81.2106 17.8071 80.9695 17.8798 80.7361 17.9755C80.5065 18.0712 80.2845 18.1898 80.0779 18.3276C79.8674 18.4653 79.6722 18.6261 79.4962 18.8021C79.3201 18.9782 79.1594 19.1772 79.0178 19.3838C78.88 19.5943 78.7652 19.8163 78.6696 20.0459C78.5739 20.2755 78.4973 20.5166 78.4514 20.7615C78.4017 21.0103 78.3749 21.259 78.3749 21.5116C78.3749 21.7603 78.4017 22.0091 78.4514 22.2579C78.4973 22.5028 78.5739 22.7439 78.6696 22.9735C78.7652 23.2031 78.88 23.4251 79.0178 23.6356C79.1594 23.8422 79.3201 24.0412 79.4962 24.2172C79.6722 24.3933 79.8674 24.554 80.0779 24.6918C80.2845 24.8296 80.5065 24.9482 80.7361 25.0439C80.9695 25.1395 81.2106 25.2123 81.4556 25.262C81.7005 25.3118 81.9531 25.3385 82.2018 25.3385C82.4506 25.3385 82.7032 25.3118 82.9481 25.262C83.193 25.2123 83.4341 25.1395 83.6637 25.0439C83.8972 24.9482 84.1191 24.8296 84.3258 24.6918C84.5363 24.554 84.7314 24.3933 84.9075 24.2172C85.0835 24.0412 85.2442 23.8422 85.382 23.6356C85.5198 23.4251 85.6384 23.2031 85.7341 22.9735C85.8298 22.7439 85.9063 22.5028 85.9522 22.2579C86.002 22.0091 86.0288 21.7603 86.0288 21.5116C86.0288 21.259 86.002 21.0103 85.9522 20.7615C85.9063 20.5166 85.8298 20.2755 85.7341 20.0459Z" fill="#DADADA"/>
+<path d="M175.008 17.6988C172.714 7.99787 163.987 0.755371 153.594 0.755371H33.522C15.2866 0.754988 0.450684 15.5909 0.450684 33.8263V153.899C0.450684 165.824 9.98628 175.557 21.8326 175.891C24.1272 185.592 32.8542 192.835 43.2467 192.835H174.382C186.517 192.835 196.39 182.962 196.39 170.826V141.949V39.6911C196.39 27.7663 186.855 18.0329 175.008 17.6988ZM188.736 170.827C188.736 178.742 182.297 185.182 174.382 185.182H43.2467C37.1197 185.182 31.8799 181.322 29.8236 175.908C29.2232 174.327 28.8918 172.615 28.8918 170.827V168.254V150.524L72.7964 76.0808C74.1332 73.8144 76.517 72.4911 79.1323 72.5332C81.7633 72.5783 84.0851 73.9844 85.3434 76.2955L104.247 111.007L131.725 161.462C132.419 162.737 133.733 163.459 135.089 163.459C135.708 163.459 136.335 163.309 136.916 162.993C138.772 161.982 139.458 159.657 138.447 157.801L129.53 141.428C133.445 141.608 137.296 140.341 140.362 137.797L157.572 123.52C160.332 121.23 164.408 121.331 167.051 123.755L167.95 124.578L175.604 131.594L188.736 143.632V170.827ZM188.736 133.249L175.603 121.21L167.95 115.382C162.963 113.297 157.033 114.022 152.685 117.629L135.475 131.906C133.582 133.476 131.111 134.111 128.695 133.646C126.28 133.183 124.22 131.677 123.043 129.517L110.969 107.345L104.226 94.9648V94.9644L92.0655 72.6342C89.4716 67.8716 84.6856 64.9727 79.2632 64.8801C73.8423 64.7951 68.9588 67.521 66.2037 72.1922L28.8914 135.457V39.6911C28.8914 31.7758 35.331 25.3362 43.2463 25.3362H66.8937C69.0074 25.3362 70.7207 23.6229 70.7207 21.5093C70.7207 19.3957 69.0074 17.6823 66.8937 17.6823H43.2463C31.1106 17.6823 21.2375 27.5555 21.2375 39.6911V149.479V168.198C13.8924 167.575 8.10458 161.402 8.10458 153.899V33.8263C8.10458 19.8109 19.507 8.40888 33.522 8.40888H153.594C159.721 8.40888 164.961 12.2684 167.017 17.6827H97.5093C95.3957 17.6827 93.6824 19.396 93.6824 21.5097C93.6824 23.6233 95.3957 25.3366 97.5093 25.3366H167.949L175.603 25.3925C182.949 26.0147 188.736 32.1876 188.736 39.6911V133.249Z" fill="#DADADA"/>
+</svg>

data/app/javascript/react/shared/Select/Select.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import "../../styles/select.scss";
+
+const Select = ({
+  className = "",
+  sizeClass = "large", // Default to 'large' for better visibility
+  children,
+  ...args
+}) => {
+  return (
+    <select
+      className={`nc-Select ${sizeClass} ${className}`}
+      {...args}
+    >
+      {children}
+    </select>
+  );
+};
+
+export default Select;

data/app/javascript/react/styles/404error.scss

@@ -0,0 +1,58 @@
+.page404 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 89vh;
+    text-align: center;
+    background-color: #f8f9fa;
+  
+    .contain {
+      padding: 2rem;
+    }
+  
+    .page404-image {
+      max-width: 400px;
+      width: 100%;
+      margin: 0 auto 1.5rem;
+    }
+  
+    .page404-title {
+      font-size: 2.5rem;
+      font-weight: bold;
+      color: #333;
+      margin-bottom: 1rem;
+    }
+  
+    .page404-subtitle {
+      font-size: 1.2rem;
+      color: #666;
+      margin-bottom: 2rem;
+    }
+  
+    .page404-button {
+      display: inline-block;
+      padding: 0.75rem 1.5rem;
+      background-color: #ffd700;
+      color: #fff;
+      border-radius: 5px;
+      text-decoration: none;
+      transition: background-color 0.3s;
+      font-size:19x;
+      font-weight: bold;
+  
+      &:hover {
+        background-color: #e6b800;
+      }
+    }
+  
+    @media (max-width: 768px) {
+      .page404-title {
+        font-size: 2rem;
+      }
+  
+      .page404-subtitle {
+        font-size: 1rem;
+      }
+    }
+  }
+  

data/app/javascript/react/styles/ApartmentCard.scss

@@ -0,0 +1,126 @@
+$primary-color: #3366cc;
+$light-gray: #f8f9fa;
+$medium-gray: #e9ecef;
+$dark-gray: #6c757d;
+$danger-color: #dc3545;
+$white: #ffffff;
+$box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+$border-radius: 8px;
+
+.apartment-card {
+  max-width: 600px;
+  margin: auto;
+  border-radius: $border-radius;
+  overflow: hidden;
+  box-shadow: $box-shadow;
+  background-color: $white;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  margin-top: 8rem;
+  margin-bottom: 5rem;
+
+  .apartment-image {
+    position: relative;
+    height: 300px;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .image-indicators {
+      position: absolute;
+      bottom: 15px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 8px;
+
+      .indicator {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: rgba(255, 255, 255, 0.5);
+
+        &.active {
+          background-color: $white;
+        }
+      }
+    }
+  }
+
+  .apartment-details {
+    padding: 1.5rem;
+
+    .property-tag {
+      display: inline-block;
+      background-color: rgba($primary-color, 0.1);
+      color: $primary-color;
+      font-size: 0.8rem;
+      font-weight: 600;
+      padding: 0.25rem 0.75rem;
+      border-radius: 4px;
+      margin-bottom: 0.75rem;
+    }
+
+    .title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      color: #333;
+      text-align: start;
+    }
+
+    .location {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: $dark-gray;
+      font-size: 0.9rem;
+      margin-bottom: 1.5rem;
+
+      .location-icon {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    .info-grid {
+      margin-bottom: 1.5rem;
+
+      .info-row {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.75rem 0;
+        border-bottom: 1px solid $medium-gray;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .info-label {
+          color: $dark-gray;
+          font-size: 0.9rem;
+        }
+
+        .info-value {
+          font-weight: 500;
+          color: #333;
+        }
+      }
+    }
+
+    .status-banner {
+      text-align: center;
+      padding: 0.75rem;
+      font-weight: 600;
+      border-radius: 4px;
+
+      &.declined {
+        background-color: rgba($danger-color, 0.1);
+        color: $danger-color;
+      }
+    }
+  }
+}