Catalogues.js
4.71 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Navigation, Pagination } from "swiper/modules";
import SwiperBtn from "@/components/Layout/SwiperBtn";
import FadeInStagger from "@/components/FadeInStagger";
import Heading from "@/components/Heading";
const CollectionData = [
{ image: "/image/img1.png", title: "Design Studio" },
{ image: "/image/img2.png", title: "Kitchen" },
{ image: "/image/img3.png", title: "Micro Creatices" },
{ image: "/image/img1.png", title: "Design Studio" },
];
const Catalogues = () => {
return (
<>
<div className="catalogues-sec sec_padd position-relative">
<Container className="custom_container">
{/* Heading + Nav Row */}
<Row className="text-center mb-4">
<Col lg={12} md={12}>
<FadeInStagger direction="top">
<Heading el="h2" heading="Catalogues" />
{/* <h2 className="heading mb-2">Catalogues </h2> */}
<p className="mb-0 gray-text">
Browse through our exclusive catalogues to find ideas for your
next masterpiece.
</p>
</FadeInStagger>
</Col>
</Row>
{/* Swiper */}
</Container>
<Container>
<Row>
<Col md={12}>
<FadeInStagger direction="top">
<Swiper
slidesPerView={4}
spaceBetween={30}
navigation={{
nextEl: ".cust-swiper-button-next",
prevEl: ".cust-swiper-button-prev",
}}
pagination={{ clickable: true }}
loop={true}
modules={[Navigation, Pagination]}
className="collectionSwiper pb-5"
breakpoints={{
320: { slidesPerView: 1, spaceBetween: 15 },
640: { slidesPerView: 2, spaceBetween: 20 },
992: { slidesPerView: 3, spaceBetween: 25 },
1200: { slidesPerView: 3, spaceBetween: 30 },
}}
>
{CollectionData.map((item, index) => (
<SwiperSlide key={index}>
<div className="collection-card">
<img
src={item.image}
alt={item.title}
className="img-fluid rounded-lg"
/>
<p className="mt-3">{item.title}</p>
</div>
</SwiperSlide>
))}
</Swiper>
</FadeInStagger>
<div className="text-center mt-5">
<button className="btn3">Explore More</button>
</div>
</Col>
</Row>
</Container>
<div className="position-absolute swiperbtn1 d-lg-flex d-none justify-content-between px-5 align-items-center w-100 ">
<button className="hm-swpr-btn cust-swiper-button-prev">
<svg
width="15"
height="13"
viewBox="0 0 15 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.9688 7C14.9688 7.5625 14.5312 8 14 8H4.40625L7.6875 11.3125C8.09375 11.6875 8.09375 12.3438 7.6875 12.7188C7.5 12.9062 7.25 13 7 13C6.71875 13 6.46875 12.9062 6.28125 12.7188L1.28125 7.71875C0.875 7.34375 0.875 6.6875 1.28125 6.3125L6.28125 1.3125C6.65625 0.90625 7.3125 0.90625 7.6875 1.3125C8.09375 1.6875 8.09375 2.34375 7.6875 2.71875L4.40625 6H14C14.5312 6 14.9688 6.46875 14.9688 7Z"
fill="white"
/>
</svg>
</button>
<button className="hm-swpr-btn cust-swiper-button-next">
<svg
width="15"
height="13"
viewBox="0 0 15 13"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.03125 7C0.03125 7.5625 0.46875 8 1 8H10.5938L7.3125 11.3125C6.90625 11.6875 6.90625 12.3438 7.3125 12.7188C7.5 12.9062 7.75 13 8 13C8.28125 13 8.53125 12.9062 8.71875 12.7188L13.7188 7.71875C14.125 7.34375 14.125 6.6875 13.7188 6.3125L8.71875 1.3125C8.34375 0.90625 7.6875 0.90625 7.3125 1.3125C6.90625 1.6875 6.90625 2.34375 7.3125 2.71875L10.5938 6H1C0.46875 6 0.03125 6.46875 0.03125 7Z"
fill="white"
/>
</svg>
</button>
</div>
</div>
</>
);
};
export default Catalogues;