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