Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

218 rindas
7.1 KiB

  1. // import React, { Component } from 'react';
  2. // import Masonry from 'react-masonry-component';
  3. // import Link from 'next/link';
  4. // const masonryOptions = {
  5. // transitionDuration: 0
  6. // };
  7. // export class Projects extends Component {
  8. // render() {
  9. // const images = this.props.images.map((image, idx) => {
  10. // return (
  11. // <div className="col-lg-4 col-sm-6 item" key={idx}>
  12. // <div className="single-latest-projects">
  13. // <img src={image.image} alt="portfolio-image" />
  14. // <div className="content">
  15. // <span>{image.category}</span>
  16. // <h3>{image.title}</h3>
  17. // </div>
  18. // <Link href="/project-details">
  19. // <a className="link-btn"></a>
  20. // </Link>
  21. // </div>
  22. // </div>
  23. // )
  24. // })
  25. // return (
  26. // <div className="our-latest-projects ptb-80">
  27. // <div className="container">
  28. // <div className="section-title text-left">
  29. // <h2>Our Latest <span>Projects</span></h2>
  30. // <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  31. // </div>
  32. // <Masonry
  33. // className={'row'} // default ''
  34. // elementType={'div'} // default 'div'
  35. // options={masonryOptions} // default {}
  36. // disableImagesLoaded={false} // default false
  37. // updateOnEachImageLoad={false} // default false and works only if disableImagesLoaded is false
  38. // >
  39. // {images}
  40. // </Masonry>
  41. // </div>
  42. // </div>
  43. // );
  44. // }
  45. // }
  46. // Projects.defaultProps = {
  47. // images: [
  48. // {
  49. // image: "/images/Home/gallery/1.jpg",
  50. // category: "Marketing",
  51. // title: "Marketing & Reporting"
  52. // },
  53. // {
  54. // image: "/images/Home/gallery/2.jpg",
  55. // category: "Marketing",
  56. // title: "Marketing & Reporting"
  57. // },
  58. // {
  59. // image: "/images/Home/gallery/3.jpg",
  60. // category: "Marketing",
  61. // title: "Marketing & Reporting"
  62. // },
  63. // {
  64. // image: "/images/Home/gallery/4.jpg",
  65. // category: "Marketing",
  66. // title: "Marketing & Reporting"
  67. // },
  68. // {
  69. // image: "/images/Home/gallery/5.jpg",
  70. // category: "Marketing",
  71. // title: "Marketing & Reporting"
  72. // },
  73. // {
  74. // image: "/images/Home/gallery/6.jpg",
  75. // category: "Marketing",
  76. // title: "Marketing & Reporting"
  77. // },
  78. // {
  79. // image: "/images/Home/gallery/7.jpg",
  80. // category: "Marketing",
  81. // title: "Marketing & Reporting"
  82. // },
  83. // {
  84. // image: "/images/Home/gallery/8.jpg",
  85. // category: "Marketing",
  86. // title: "Marketing & Reporting"
  87. // },
  88. // {
  89. // image: "/images/Home/gallery/9.jpg",
  90. // category: "Marketing",
  91. // title: "Marketing & Reporting"
  92. // },
  93. // ]
  94. // }
  95. // export default Projects;
  96. import React from 'react';
  97. import Link from 'next/link';
  98. import dynamic from 'next/dynamic';
  99. const OwlCarousel = dynamic(import('react-owl-carousel3'));
  100. const options = {
  101. loop: true,
  102. nav: false,
  103. dots: true,
  104. autoplay: true,
  105. smartSpeed: 1000,
  106. margin: 30,
  107. autoplayTimeout: 5000,
  108. responsive: {
  109. 0:{
  110. items: 1,
  111. },
  112. 576:{
  113. items: 2,
  114. },
  115. 768:{
  116. items: 2,
  117. },
  118. 1024:{
  119. items: 3,
  120. },
  121. 1200:{
  122. items: 4,
  123. }
  124. },
  125. }
  126. const Projects = () => {
  127. const [display, setDisplay] = React.useState(false);
  128. React.useEffect(() => {
  129. setDisplay(true);
  130. }, [])
  131. return (
  132. <div id="gallery" className="ml-projects-area pt-0 ptb-80">
  133. <div className="container">
  134. <div className="section-title st-fs-28">
  135. <h2>Thamrin Group Gallery</h2>
  136. <div className="bar"></div>
  137. </div>
  138. </div>
  139. <div className="container-fluid">
  140. {display ? <OwlCarousel
  141. className="ml-projects-slides owl-carousel owl-theme"
  142. {...options}
  143. >
  144. <div className="single-ml-projects-box">
  145. <img src="/images/Home/gallery/1.jpg" alt="image" />
  146. </div>
  147. <div className="single-ml-projects-box">
  148. <img src="/images/Home/gallery/2.jpg" alt="image" />
  149. </div>
  150. <div className="single-ml-projects-box">
  151. <img src="/images/Home/gallery/3.jpg" alt="image" />
  152. </div>
  153. <div className="single-ml-projects-box">
  154. <img src="/images/Home/gallery/4.jpg" alt="image" />
  155. </div>
  156. <div className="single-ml-projects-box">
  157. <img src="/images/Home/gallery/5.jpg" alt="image" />
  158. </div>
  159. <div className="single-ml-projects-box">
  160. <img src="/images/Home/gallery/6.jpg" alt="image" />
  161. </div>
  162. <div className="single-ml-projects-box">
  163. <img src="/images/Home/gallery/7.jpg" alt="image" />
  164. </div>
  165. <div className="single-ml-projects-box">
  166. <img src="/images/Home/gallery/8.jpg" alt="image" />
  167. </div>
  168. <div className="single-ml-projects-box">
  169. <img src="/images/Home/gallery/9.jpg" alt="image" />
  170. </div>
  171. </OwlCarousel> : ''}
  172. </div>
  173. {/* Shape Images */}
  174. <div className="shape1">
  175. <img src="/images/shape1.png" alt="shape" />
  176. </div>
  177. <div className="shape2 rotateme">
  178. <img src="/images/shape2.svg" alt="shape" />
  179. </div>
  180. <div className="shape3">
  181. <img src="/images/shape3.svg" alt="shape" />
  182. </div>
  183. <div className="shape4">
  184. <img src="/images/shape4.svg" alt="shape" />
  185. </div>
  186. <div className="shape7">
  187. <img src="/images/shape4.svg" alt="shape" />
  188. </div>
  189. <div className="shape8 rotateme">
  190. <img src="/images/shape2.svg" alt="shape" />
  191. </div>
  192. </div>
  193. );
  194. }
  195. export default Projects;