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 Positions69 open positions across and all offices and all teams.
// import node module librariesimport { Link } from 'react-router-dom';import { Col, Row, Container } from 'react-bootstrap';// import custom componentsimport HeroCollageGallery from 'components/marketing/common/gallery/HeroCollageGallery';// import media filesimport 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 componentsimport CollageGallery from 'components/marketing/common/gallery/CollageGallery';// import media filesimport 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 componentsimport JustifiedGallery from 'components/marketing/common/gallery/JustifiedGallery';// import media filesimport 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
// import node module librariesimport { Col, Row } from 'react-bootstrap';// import custom componentsimport GKLightbox from 'components/elements/lightbox/GKLightbox'// import media filesimport 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>);}