Image Grid

Geeks image grid is a simple construction which allows you to create a responsive layout for your images.


Image Collage With Text

Join the team, we’re growing fast!

We’re looking for incredible people to build on our strong momentum. Help us power the brands you know and love.

See All Open Positions

69 open positions across and all offices and all teams.

// import node module libraries
import { Link } from 'react-router-dom';
import { Col, Row, Container } from 'react-bootstrap';
// import custom components
import HeroCollageGallery from 'components/marketing/common/gallery/HeroCollageGallery';
// import media files
import Avatar6 from 'assets/images/avatar/avatar-6.jpg';
import Avatar8 from 'assets/images/avatar/avatar-8.jpg';
import Avatar10 from 'assets/images/avatar/avatar-10.jpg';
import Avatar11 from 'assets/images/avatar/avatar-11.jpg';
import Avatar12 from 'assets/images/avatar/avatar-12.jpg';
import Avatar13 from 'assets/images/avatar/avatar-13.jpg';
import Avatar14 from 'assets/images/avatar/avatar-14.jpg';
export const ImageGrid1Example = () => {
const images = [
Avatar6, Avatar8, Avatar10, Avatar11, Avatar12, Avatar13, Avatar14
]
return (
<section className="py-md-14 py-8 bg-white">
<Container>
<Row className="align-items-center">
<Col xl={6} lg={6} xs={12}>
<div className="mb-5 ">
<h1 className="display-3 mb-4 fw-bold "> Join the team, we’re growing fast! </h1>
<p className="lead mb-4 pe-xl-12 ">
We’re looking for incredible people to build on our strong momentum. Help us power the brands you know and love.
</p>
<Link to="#position" className="btn btn-primary"> See All Open Positions </Link>
<p className=" mt-4 mb-0">
69 open positions across and <Link to="#">all offices</Link> and <Link to="#">all teams</Link>.
</p>
</div>
</Col>
<Col lg={6} xs={12}>
<HeroCollageGallery images={images} />
</Col>
</Row>
</Container>
</section>
);
}

Image Collage

// import custom components
import CollageGallery from 'components/marketing/common/gallery/CollageGallery';
// import media files
import Avatar1 from 'assets/images/avatar/avatar-1.jpg';
import Avatar2 from 'assets/images/avatar/avatar-2.jpg';
import Avatar3 from 'assets/images/avatar/avatar-3.jpg';
import Avatar4 from 'assets/images/avatar/avatar-4.jpg';
import Avatar5 from 'assets/images/avatar/avatar-5.jpg';
import Avatar6 from 'assets/images/avatar/avatar-6.jpg';
import Avatar7 from 'assets/images/avatar/avatar-7.jpg';
import Avatar8 from 'assets/images/avatar/avatar-8.jpg';
import Avatar10 from 'assets/images/avatar/avatar-10.jpg';
import Avatar11 from 'assets/images/avatar/avatar-11.jpg';
import Avatar12 from 'assets/images/avatar/avatar-12.jpg';
import Avatar13 from 'assets/images/avatar/avatar-13.jpg';
import Avatar14 from 'assets/images/avatar/avatar-14.jpg';
export const ImageGrid2Example = () => {
const images = [
Avatar1, Avatar3, Avatar2,
Avatar4, Avatar5, Avatar7,
Avatar6, Avatar8, Avatar10,
Avatar11, Avatar12, Avatar13,
Avatar14
]
return <CollageGallery images={images} />
}

Image Grid

// import custom components
import JustifiedGallery from 'components/marketing/common/gallery/JustifiedGallery';
// import media files
import GalleryImage1 from 'assets/images/about/geeksui-img-1.jpg';
import GalleryImage2 from 'assets/images/about/geeksui-img-2.jpg';
import GalleryImage3 from 'assets/images/about/geeksui-img-3.jpg';
import GalleryImage4 from 'assets/images/about/geeksui-img-4.jpg';
import GalleryImage5 from 'assets/images/about/geeksui-img-5.jpg';
import GalleryImage6 from 'assets/images/about/geeksui-img-6.jpg';
export const ImageGrid3Example = () => {
const GalleryImages = [
{ id: 1, image: GalleryImage1 },
{ id: 2, image: GalleryImage2 },
{ id: 3, image: GalleryImage3 },
{ id: 4, image: GalleryImage4 },
{ id: 5, image: GalleryImage5 },
{ id: 6, image: GalleryImage6 }
];
return <JustifiedGallery images={GalleryImages} />;
}

Image LightBox Zoom

image
image
image
image
image
image
image
image
// import node module libraries
import { Col, Row } from 'react-bootstrap';
// import custom components
import GKLightbox from 'components/elements/lightbox/GKLightbox'
// import media files
import GalleryImg1 from 'assets/images/job/jpg/job-gallery-img-1.jpg';
import GalleryImg2 from 'assets/images/job/jpg/job-gallery-img-2.jpg';
import GalleryImg3 from 'assets/images/job/jpg/job-gallery-img-3.jpg';
import GalleryImg4 from 'assets/images/job/jpg/job-gallery-img-4.jpg';
import GalleryImg5 from 'assets/images/job/jpg/job-gallery-img-5.jpg';
import GalleryImg6 from 'assets/images/job/jpg/job-gallery-img-6.jpg';
import GalleryImg7 from 'assets/images/job/jpg/job-gallery-img-7.jpg';
import GalleryImg8 from 'assets/images/job/jpg/job-gallery-img-8.jpg';
export const ImageGrid4Example = () => {
const images = [
{ image: GalleryImg1 },
{ image: GalleryImg2 },
{ image: GalleryImg3 },
{ image: GalleryImg4 },
{ image: GalleryImg5 },
{ image: GalleryImg6 },
{ image: GalleryImg7 },
{ image: GalleryImg8 }
];
return (
<Row className="mt-6">
{images.map((item, index) => {
return (
<Col lg={3} md={4} xs={12} key={index}>
<div className="mb-4">
<GKLightbox image={item.image} />
</div>
</Col>
)
})}
</Row>
);
}
Buy Now