You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

142 lines
6.2 KiB

  1. import React from 'react';
  2. import Link from 'next/link';
  3. import * as Icon from 'react-feather';
  4. const BlogPost = () => {
  5. return (
  6. <div className="blog-area pt-80 pb-50">
  7. <div className="container">
  8. <div className="section-title">
  9. <h2>Our Recent Story</h2>
  10. <div className="bar"></div>
  11. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  12. </div>
  13. <div className="row justify-content-center">
  14. <div className="col-lg-4 col-md-6">
  15. <div className="single-blog-post-box bg-f4faff">
  16. <div className="entry-thumbnail">
  17. <Link href="/blog-details">
  18. <a>
  19. <img src="/images/blog-image/blog1.jpg" alt="image" />
  20. </a>
  21. </Link>
  22. </div>
  23. <div className="entry-post-content">
  24. <div className="entry-meta">
  25. <ul>
  26. <li><a href="#">Admin</a></li>
  27. <li>August 15, 2021</li>
  28. </ul>
  29. </div>
  30. <h3>
  31. <Link href="/blog-details">
  32. <a>Making Peace With The Feast Or Famine Of Freelancing</a>
  33. </Link>
  34. </h3>
  35. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
  36. <Link href="/blog-details">
  37. <a className="learn-more-btn">
  38. Read Story <Icon.Plus />
  39. </a>
  40. </Link>
  41. </div>
  42. </div>
  43. </div>
  44. <div className="col-lg-4 col-md-6">
  45. <div className="single-blog-post-box bg-f4faff">
  46. <div className="entry-thumbnail">
  47. <Link href="/blog-details">
  48. <a><img src="/images/blog-image/blog2.jpg" alt="image" /></a>
  49. </Link>
  50. </div>
  51. <div className="entry-post-content">
  52. <div className="entry-meta">
  53. <ul>
  54. <li><a href="#">Admin</a></li>
  55. <li>August 18, 2021</li>
  56. </ul>
  57. </div>
  58. <h3>
  59. <Link href="/blog-details">
  60. <a>I Used The Web For A Day On A 50 MB Budget</a>
  61. </Link>
  62. </h3>
  63. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
  64. <Link href="/blog-details">
  65. <a className="learn-more-btn">
  66. Read Story <Icon.Plus />
  67. </a>
  68. </Link>
  69. </div>
  70. </div>
  71. </div>
  72. <div className="col-lg-4 col-md-6">
  73. <div className="single-blog-post-box bg-f4faff">
  74. <div className="entry-thumbnail">
  75. <Link href="/blog-details">
  76. <a><img src="/images/blog-image/blog3.jpg" alt="image" /></a>
  77. </Link>
  78. </div>
  79. <div className="entry-post-content">
  80. <div className="entry-meta">
  81. <ul>
  82. <li><a href="#">Admin</a></li>
  83. <li>August 15, 2021</li>
  84. </ul>
  85. </div>
  86. <h3>
  87. <Link href="/blog-details">
  88. <a>Here are the 5 most telling signs of micromanagement</a>
  89. </Link>
  90. </h3>
  91. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
  92. <Link href="/blog-details">
  93. <a className="learn-more-btn">
  94. Read Story <Icon.Plus />
  95. </a>
  96. </Link>
  97. </div>
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. {/* Shape Images */}
  103. <div className="shape1">
  104. <img src="/images/shape1.png" alt="shape" />
  105. </div>
  106. <div className="shape2 rotateme">
  107. <img src="/images/shape2.svg" alt="shape" />
  108. </div>
  109. <div className="shape3">
  110. <img src="/images/shape3.svg" alt="shape" />
  111. </div>
  112. <div className="shape4">
  113. <img src="/images/shape4.svg" alt="shape" />
  114. </div>
  115. <div className="shape6 rotateme">
  116. <img src="/images/shape4.svg" alt="shape" />
  117. </div>
  118. <div className="shape7">
  119. <img src="/images/shape4.svg" alt="shape" />
  120. </div>
  121. <div className="shape8 rotateme">
  122. <img src="/images/shape2.svg" alt="shape" />
  123. </div>
  124. </div>
  125. )
  126. }
  127. export default BlogPost;