Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

112 linhas
4.4 KiB

  1. import React from 'react';
  2. import OwlCarousel from 'react-owl-carousel3';
  3. import * as Icon from 'react-feather';
  4. const options = {
  5. loop: false,
  6. nav: false,
  7. dots: true,
  8. autoplay: true,
  9. smartSpeed: 1000,
  10. autoplayTimeout: 5000,
  11. items: 1,
  12. animateOut: 'fadeOut',
  13. }
  14. const FeedbackStyleFour = () => {
  15. const [display, setDisplay] = React.useState(false);
  16. React.useEffect(() => {
  17. setDisplay(true);
  18. }, [])
  19. return (
  20. <div className="ml-feedback-area ptb-80">
  21. <div className="container">
  22. <div className="section-title">
  23. <h2>Our Clients Feedback</h2>
  24. <div className="bar"></div>
  25. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  26. </div>
  27. {display ? <OwlCarousel
  28. className="ml-feedback-slides owl-carousel owl-theme"
  29. {...options}
  30. >
  31. <div className="single-ml-feedback-item">
  32. <div className="client-info">
  33. <img src="/images/client-image/client1.jpg" alt="image" />
  34. <h3>Sarah Taylor</h3>
  35. <span>CEO at Envato</span>
  36. </div>
  37. <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam harum sit. Accusantium veritatis dolore ducimus illum, cumque excepturi, autem rerum illo amet placeat odit corporis!</p>
  38. <div className="rating">
  39. <Icon.Star />
  40. <Icon.Star />
  41. <Icon.Star />
  42. <Icon.Star />
  43. <Icon.Star />
  44. </div>
  45. </div>
  46. <div className="single-ml-feedback-item">
  47. <div className="client-info">
  48. <img src="/images/client-image/client2.jpg" alt="image" />
  49. <h3>Steven Smith</h3>
  50. <span>CEO at Envato</span>
  51. </div>
  52. <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam harum sit. Accusantium veritatis dolore ducimus illum, cumque excepturi, autem rerum illo amet placeat odit corporis!</p>
  53. <div className="rating">
  54. <Icon.Star />
  55. <Icon.Star />
  56. <Icon.Star />
  57. <Icon.Star />
  58. <Icon.Star />
  59. </div>
  60. </div>
  61. <div className="single-ml-feedback-item">
  62. <div className="client-info">
  63. <img src="/images/client-image/client3.jpg" alt="image" />
  64. <h3>James Eva</h3>
  65. <span>CEO at Envato</span>
  66. </div>
  67. <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid ullam harum sit. Accusantium veritatis dolore ducimus illum, cumque excepturi, autem rerum illo amet placeat odit corporis!</p>
  68. <div className="rating">
  69. <Icon.Star />
  70. <Icon.Star />
  71. <Icon.Star />
  72. <Icon.Star />
  73. <Icon.Star />
  74. </div>
  75. </div>
  76. </OwlCarousel> : ''}
  77. </div>
  78. {/* Shape Images */}
  79. <div className="shape1">
  80. <img src="/images/shape1.png" alt="shape" />
  81. </div>
  82. <div className="shape2 rotateme">
  83. <img src="/images/shape2.svg" alt="shape" />
  84. </div>
  85. <div className="shape3">
  86. <img src="/images/shape3.svg" alt="shape" />
  87. </div>
  88. <div className="shape4">
  89. <img src="/images/shape4.svg" alt="shape" />
  90. </div>
  91. <div className="shape7">
  92. <img src="/images/shape4.svg" alt="shape" />
  93. </div>
  94. <div className="shape8 rotateme">
  95. <img src="/images/shape2.svg" alt="shape" />
  96. </div>
  97. </div>
  98. );
  99. }
  100. export default FeedbackStyleFour;