Files
GNX-WEB/gnx-react/components/pages/career/MasonryGallery.tsx
Iliyan Angelov fe26b7cca4 GNXSOFT.COM
2025-09-26 00:15:37 +03:00

57 lines
2.2 KiB
TypeScript

import Image from "next/legacy/image";
import one from "@/public/images/masonry/one.png";
import two from "@/public/images/masonry/two.png";
import three from "@/public/images/masonry/three.png";
import four from "@/public/images/masonry/four.png";
import five from "@/public/images/masonry/five.png";
import six from "@/public/images/masonry/six.png";
import seven from "@/public/images/masonry/seven.png";
const MasonryGallery = () => {
return (
<div className="mason pt-120 pb-120 fade-wrapper">
<div className="container">
<div className="row vertical-column-gap">
<div className="col-12 col-md-3">
<div className="mason-single fade-top">
<Image src={one} className="mh-260" alt="Image" width={300} height={260} />
</div>
</div>
<div className="col-12 col-md-4">
<div className="mason-single fade-bottom">
<Image src={two} className="mh-260" alt="Image" width={300} height={260} />
</div>
</div>
<div className="col-12 col-md-3">
<div className="mason-single fade-left">
<Image src={three} className="mh-260 botter" alt="Image" width={300} height={260} />
</div>
</div>
<div className="col-12 col-md-2">
<div className="mason-single fade-right">
<Image src={seven} className="mh-260 botter" alt="Image" width={300} height={260} />
</div>
</div>
<div className="col-12 col-md-5">
<div className="mason-single fade-top">
<Image src={five} className="mh-260" alt="Image" width={300} height={260} />
</div>
</div>
<div className="col-12 col-md-2">
<div className="mason-single fade-bottom">
<Image src={six} className="mh-260" alt="Image" width={300} height={260} />
</div>
</div>
<div className="col-12 col-md-5">
<div className="mason-single toper fade-right">
<Image src={four} className="mh-260" alt="Image" width={300} height={260} />
</div>
</div>
</div>
</div>
</div>
);
};
export default MasonryGallery;