This commit is contained in:
NikGob
2025-09-22 20:17:34 +03:00
parent f96aa1a348
commit 34696e69c9
5 changed files with 32 additions and 3 deletions

View File

@@ -24,7 +24,7 @@ function Footer() {
className="footer__logo font-inter-regular" className="footer__logo font-inter-regular"
onClick={() => handlePageChange("/")} onClick={() => handlePageChange("/")}
> >
OOO "ALMA-VID" Ткаченко НН
</Link> </Link>
<div className="footer-info font-inter-bold"> <div className="footer-info font-inter-bold">
<Link to="/objects" onClick={() => handlePageChange("/objects")}> <Link to="/objects" onClick={() => handlePageChange("/objects")}>

View File

@@ -6,6 +6,17 @@ function Object(props) {
const [needsExpansion, setNeedsExpansion] = useState(false); const [needsExpansion, setNeedsExpansion] = useState(false);
const contentRef = useRef(null); const contentRef = useRef(null);
const handleCardClick = (e) => {
// Don't redirect if user clicked on the expand button
if (e.target.closest('.item__expand-btn')) {
return;
}
if (props.cianUrl) {
window.open(props.cianUrl, '_blank');
}
};
useEffect(() => { useEffect(() => {
const checkExpansion = () => { const checkExpansion = () => {
if (!props.desc || !props.address || !contentRef.current) { if (!props.desc || !props.address || !contentRef.current) {
@@ -36,7 +47,11 @@ function Object(props) {
}; };
return ( return (
<div className={`item ${isExpanded ? "item--expanded" : ""}`}> <div
className={`item ${isExpanded ? "item--expanded" : ""} ${props.cianUrl ? "item--clickable" : ""}`}
onClick={handleCardClick}
style={{ cursor: props.cianUrl ? 'pointer' : 'default' }}
>
<img className="item__image" src={props.image} alt="квартира" /> <img className="item__image" src={props.image} alt="квартира" />
<div className="item__info font-inter-bold"> <div className="item__info font-inter-bold">
<div <div

View File

@@ -20,6 +20,16 @@
transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
} }
&--clickable {
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
}
@media (min-width: 1800px) { @media (min-width: 1800px) {
height: 480px; height: 480px;

View File

@@ -86,18 +86,21 @@ const SliderComponent = () => {
price="2 500 000 ₽" price="2 500 000 ₽"
desc="2-комн. кв., 47 м², 1/2 этаж" desc="2-комн. кв., 47 м², 1/2 этаж"
address="Челябинская область, Челябинск, Лазурная улица, 14А, район Металлургический, микрорайон Северо-Западный" address="Челябинская область, Челябинск, Лазурная улица, 14А, район Металлургический, микрорайон Северо-Западный"
cianUrl="https://cian.ru/sale/flat/310187199/"
/> />
<Object <Object
image={objectPicTwo} image={objectPicTwo}
price="4 200 000 ₽" price="4 200 000 ₽"
desc="3-комн. кв., 77 м², 4/4 этаж" desc="3-комн. кв., 77 м², 4/4 этаж"
address="Челябинская область, Челябинск, улица Ярослава Гашека, 20, район Ленинский, микрорайон Центральный" address="Челябинская область, Челябинск, улица Ярослава Гашека, 20, район Ленинский, микрорайон Центральный"
cianUrl="https://cian.ru/"
/> />
<Object <Object
image={objectPicThree} image={objectPicThree}
price="4 900 000 ₽" price="4 900 000 ₽"
desc="Квартира-студия, 27,6 м², 19/25 этаж" desc="Квартира-студия, 27,6 м², 19/25 этаж"
address="Свердловская область, Екатеринбург, улица Студенческая, 80, район Верх-Исетский, микрорайон Уралмаш" address="Свердловская область, Екатеринбург, улица Студенческая, 80, район Верх-Исетский, микрорайон Уралмаш"
cianUrl="https://cian.ru/"
/> />
</Slider> </Slider>
</div> </div>
@@ -114,6 +117,7 @@ const SliderComponent = () => {
price={object.price} price={object.price}
desc={object.title} desc={object.title}
address={object.address} address={object.address}
cianUrl={object.cianUrl}
/> />
))} ))}
</Slider> </Slider>

View File

@@ -37,7 +37,7 @@ function About() {
</div> </div>
</div> </div>
<div className="about__title font-inter-semibold"> <div className="about__title font-inter-semibold">
Об {CONTACTS.companyName} <span>{CONTACTS.companyNameShort}</span> Об {CONTACTS.companyName}
</div> </div>
</section> </section>
</div> </div>