25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 

229 satır
7.5 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 = ({galleries,title}) => {
  127. const images = (galleries)?galleries.map((data, index) => {
  128. return (
  129. <div className="single-ml-projects-box">
  130. <img style={{height: "300px",
  131. "objectFit": "cover"}} src={`/api/util?img=${encodeURIComponent(data)}`} alt="image" />
  132. </div>
  133. );
  134. }):'';
  135. const [display, setDisplay] = React.useState(false);
  136. React.useEffect(() => {
  137. setDisplay(true);
  138. }, [])
  139. return (galleries&&galleries.length>0)?(
  140. <div id="gallery" className="ml-projects-area pt-0 ptb-80">
  141. <div className="container">
  142. <div className="section-title st-fs-28">
  143. <h2>{title||'Thamrin Group Gallery'}</h2>
  144. <div className="bar"></div>
  145. </div>
  146. </div>
  147. <div className="container-fluid">
  148. {display ? <OwlCarousel
  149. className="ml-projects-slides owl-carousel owl-theme"
  150. {...options}
  151. >
  152. {images}
  153. {/* <div className="single-ml-projects-box">
  154. <img src="/images/Home/gallery/1.jpg" alt="image" />
  155. </div>
  156. <div className="single-ml-projects-box">
  157. <img src="/images/Home/gallery/2.jpg" alt="image" />
  158. </div>
  159. <div className="single-ml-projects-box">
  160. <img src="/images/Home/gallery/3.jpg" alt="image" />
  161. </div>
  162. <div className="single-ml-projects-box">
  163. <img src="/images/Home/gallery/4.jpg" alt="image" />
  164. </div>
  165. <div className="single-ml-projects-box">
  166. <img src="/images/Home/gallery/5.jpg" alt="image" />
  167. </div>
  168. <div className="single-ml-projects-box">
  169. <img src="/images/Home/gallery/6.jpg" alt="image" />
  170. </div>
  171. <div className="single-ml-projects-box">
  172. <img src="/images/Home/gallery/7.jpg" alt="image" />
  173. </div>
  174. <div className="single-ml-projects-box">
  175. <img src="/images/Home/gallery/8.jpg" alt="image" />
  176. </div>
  177. <div className="single-ml-projects-box">
  178. <img src="/images/Home/gallery/9.jpg" alt="image" />
  179. </div> */}
  180. </OwlCarousel> : ''}
  181. </div>
  182. {/* Shape Images */}
  183. <div className="shape1">
  184. <img src="/images/shape1.png" alt="shape" />
  185. </div>
  186. <div className="shape2 rotateme">
  187. <img src="/images/shape2.svg" alt="shape" />
  188. </div>
  189. <div className="shape3">
  190. <img src="/images/shape3.svg" alt="shape" />
  191. </div>
  192. <div className="shape4">
  193. <img src="/images/shape4.svg" alt="shape" />
  194. </div>
  195. <div className="shape7">
  196. <img src="/images/shape4.svg" alt="shape" />
  197. </div>
  198. <div className="shape8 rotateme">
  199. <img src="/images/shape2.svg" alt="shape" />
  200. </div>
  201. </div>
  202. ):"";
  203. }
  204. export default Projects;