HomeBanner.js
3.23 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
import React from "react";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectCreative, Navigation, Autoplay } from "swiper/modules";
const bannerData = [
{
backgroundImage: "/images/banner/banner-bg1.jpg",
subtitle: "Welcome to Advith Consulting!",
title: "Take Our Help To Reach The Top",
description:
"As businesses & individuals grow, the. We, at Advith Consulting offer guidance and support to help you navigate growth and expansion through our array of offerrings. Our name, Advith, means second to none and that's the level of excellence we strive for in everything we do. ",
buttonText1: "Contact Us",
buttonLink1: "/contact",
buttonText2: "Get Started",
buttonLink2: "/contact",
image: "/images/banner/banner1.png",
},
{
backgroundImage: "/images/banner/banner-bg1.jpg",
subtitle: "WELCOME TO US",
title: "Take Our Help To Reach The Top",
description:
"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam inta nonumy eirmod tempor invidunt ut labore et.",
buttonText1: "Contact Us",
buttonLink1: "/contact",
buttonText2: "Get Started",
buttonLink2: "/contact",
image: "/images/banner/banner1.png",
},
];
const HomeBanner = () => {
return (
<Swiper
navigation={true}
grabCursor={true}
effect={"creative"}
creativeEffect={{
prev: {
shadow: true,
translate: [0, 0, -400],
},
next: {
translate: ["100%", 0, 0],
},
}}
autoplay={{
delay: 5000,
disableOnInteraction: true,
pauseOnMouseEnter: true,
}}
modules={[EffectCreative, Navigation, Autoplay]}
className="home-slides"
>
{bannerData.map((banner, index) => (
<SwiperSlide key={index}>
<div
className="main-banner-area"
style={{
backgroundImage: `url(${banner.backgroundImage})`,
}}
>
<div className="container">
<div className="row align-items-center">
<div className="col-lg-6 col-md-12">
<div className="main-banner-content">
<span className="sub-title">{banner.subtitle}</span>
<h1>{banner.title}</h1>
<p>{banner.description}</p>
<div className="btn-box">
<Link href={banner.buttonLink1} className="default-btn">
{banner.buttonText1}
<i className="ri-arrow-right-line"></i>
</Link>
<Link href={banner.buttonLink2} className="default-btn">
{banner.buttonText2}
<i className="ri-arrow-right-line"></i>
</Link>
</div>
</div>
</div>
<div className="col-lg-6 col-md-12">
<div className="main-banner-image">
<img src={banner.image} alt="image" />
</div>
</div>
</div>
</div>
</div>
</SwiperSlide>
))}
</Swiper>
);
};
export default HomeBanner;