irongit
Sign inRegister
huncholanehuncholane/slroofPublic
slroof/components/sections/Project4.js
142 lines6.9 KBJavaScript
RawDownloadHistory
1import Link from "next/link"
2import Slider from "react-slick"
3const settings = {
4 dots: true,
5 infinite: true,
6 speed: 1000,
7 autoplay: false,
8 arrows: false,
9 slidesToShow: 3,
10 slidesToScroll: 1,
11 responsive: [
12 {
13 breakpoint: 1200,
14 settings: {
15 slidesToShow: 2,
16 slidesToScroll: 1,
17 infinite: true,
18 }
19 },
20 {
21 breakpoint: 992,
22 settings: {
23 slidesToShow: 2,
24 slidesToScroll: 1
25 }
26 },
27 {
28 breakpoint: 767,
29 settings: {
30 slidesToShow: 1,
31 slidesToScroll: 1,
32 arrows: false,
33 }
34 },
35 {
36 breakpoint: 575,
37 settings: {
38 slidesToShow: 1,
39 slidesToScroll: 1,
40 arrows: false,
41 }
42 },
43 ]
44}
45
46export default function Project4() {
47 return (
48 <>
49 <section className="project-area-four">
50 <div className="container">
51 <div className="row justify-content-center">
52 <div className="col-lg-8">
53 <div className="section-title text-center mb-60">
54 <span className="sub-title">Latest Projects</span>
55 <h2 className="title">Explore Our Latest Projects</h2>
56 </div>
57 </div>
58 </div>
59 <Slider {...settings} className="row project-active-two">
60 <div className="col-lg-4">
61 <div className="project-item-four">
62 <div className="project-thumb-four">
63 <Link href="/project-details"><img src="/assets/img/project/h4_project_img01.jpg" alt="" /></Link>
64 </div>
65 <div className="project-content-four">
66 <div className="content-left">
67 <h2 className="title"><Link href="/project-details">Replacement of Roof</Link></h2>
68 <ul className="list-wrap">
69 <li><Link href="/project-details">Roof</Link></li>
70 <li><Link href="/project-details">Ideas</Link></li>
71 </ul>
72 </div>
73 <div className="content-right">
74 <Link href="/project-details" className="link-btn"><i className="fas fa-arrow-right" /></Link>
75 </div>
76 </div>
77 </div>
78 </div>
79 <div className="col-lg-4">
80 <div className="project-item-four">
81 <div className="project-thumb-four">
82 <Link href="/project-details"><img src="/assets/img/project/h4_project_img02.jpg" alt="" /></Link>
83 </div>
84 <div className="project-content-four">
85 <div className="content-left">
86 <h2 className="title"><Link href="/project-details">Fixing of Roof Damage</Link></h2>
87 <ul className="list-wrap">
88 <li><Link href="/project-details">Roof</Link></li>
89 <li><Link href="/project-details">Ideas</Link></li>
90 </ul>
91 </div>
92 <div className="content-right">
93 <Link href="/project-details" className="link-btn"><i className="fas fa-arrow-right" /></Link>
94 </div>
95 </div>
96 </div>
97 </div>
98 <div className="col-lg-4">
99 <div className="project-item-four">
100 <div className="project-thumb-four">
101 <Link href="/project-details"><img src="/assets/img/project/h4_project_img03.jpg" alt="" /></Link>
102 </div>
103 <div className="project-content-four">
104 <div className="content-left">
105 <h2 className="title"><Link href="/project-details">Modern Roofing Style</Link></h2>
106 <ul className="list-wrap">
107 <li><Link href="/project-details">Roof</Link></li>
108 <li><Link href="/project-details">Ideas</Link></li>
109 </ul>
110 </div>
111 <div className="content-right">
112 <Link href="/project-details" className="link-btn"><i className="fas fa-arrow-right" /></Link>
113 </div>
114 </div>
115 </div>
116 </div>
117 <div className="col-lg-4">
118 <div className="project-item-four">
119 <div className="project-thumb-four">
120 <Link href="/project-details"><img src="/assets/img/project/h4_project_img02.jpg" alt="" /></Link>
121 </div>
122 <div className="project-content-four">
123 <div className="content-left">
124 <h2 className="title"><Link href="/project-details">Fixing of Roof Damage</Link></h2>
125 <ul className="list-wrap">
126 <li><Link href="/project-details">Roof</Link></li>
127 <li><Link href="/project-details">Ideas</Link></li>
128 </ul>
129 </div>
130 <div className="content-right">
131 <Link href="/project-details" className="link-btn"><i className="fas fa-arrow-right" /></Link>
132 </div>
133 </div>
134 </div>
135 </div>
136 </Slider>
137 </div>
138 </section>
139
140 </>
141 )
142}