Blame view

components/home/Banner.js 10.1 KB
Ravindra Kanojiya committed
1
import React from "react";
Ravindra Kanojiya committed
2 3 4 5 6 7 8 9 10 11
import { Swiper, SwiperSlide } from "swiper/react";
import { motion } from "framer-motion";
import { fadeIn, zoomIn, slideFromLeft, slideFromRight } from "../animationvariants.js";
import { Pagination, Navigation, Autoplay } from "swiper/modules";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import Image from "next/image.js";

Ravindra Kanojiya committed
12 13 14 15 16
const Banner = () => {
  return (
    <>
      <section className="home-banner">
        <div>
Ravindra Kanojiya committed
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
          <Swiper
            slidesPerView={1}
            autoplay={{
              delay: 9000,
              disableOnInteraction: false
            }}
           
            spaceBetween={10}
            navigation={true}
            pagination={{
              clickable: true
            }}
            // breakpoints={{
            //   640: {
            //     slidesPerView: 2,
            //     spaceBetween: 20
            //   },
            //   768: {
            //     slidesPerView: 4,
            //     spaceBetween: 40
            //   },
            //   1024: {
            //     slidesPerView: 5,
            //     spaceBetween: 50
            //   }
            // }}
            modules={[Pagination, Navigation, Autoplay]}
            className="mySwiper01"
Ravindra Kanojiya committed
45
          >
Ravindra Kanojiya committed
46
            <SwiperSlide>
Ravindra Kanojiya committed
47
              <div className="slider-item slider-item-01">
Ravindra Kanojiya committed
48 49 50 51 52 53 54 55
                <div className="home-banner-bg">
                  <span className="image-container hide-on-mobile">
                    <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/01.jpg" />
                  </span>
                  <span className="image-container hide-on-desktop">
                    <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/01-m.jpg" />
                  </span>
                </div>
Ravindra Kanojiya committed
56 57 58
                <div className="d-table">
                  <div className="d-table-cell">
                    <div className="container">
Ravindra Kanojiya committed
59
                      <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
Ravindra Kanojiya committed
60
                        <div className="row">
Ravindra Kanojiya committed
61
                          <div className="col-md-6">
Ravindra Kanojiya committed
62
                            <div className="slider-text">
Ravindra Kanojiya committed
63
                              <div className="banner-title">
Ravindra Kanojiya committed
64
                                <div className="banner-txt">
Ravindra Kanojiya committed
65 66 67 68 69 70
                                  <h1>Lorem ipsum dolor sit amet</h1>
                                  <div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
                                  <div className="disc">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                                    minim veniam, quis nostrud.
                                  </div>
Ravindra Kanojiya committed
71
                                </div>
Ravindra Kanojiya committed
72 73 74 75 76 77
                              </div>
                              <div className="common-btn">
                                <a className="btn btn-primary" href="/allergic-rhinitis">
                                  Explore Now
                                </a>
                              </div>
Ravindra Kanojiya committed
78
                            </div>
Ravindra Kanojiya committed
79
                          </div>
Ravindra Kanojiya committed
80
                        </div>
Ravindra Kanojiya committed
81
                      </motion.div>
Ravindra Kanojiya committed
82 83 84 85
                    </div>
                  </div>
                </div>
              </div>
Ravindra Kanojiya committed
86 87
            </SwiperSlide>
            <SwiperSlide>
Ravindra Kanojiya committed
88
              <div className="slider-item slider-item-02">
Ravindra Kanojiya committed
89 90 91 92 93 94 95 96
              <div className="home-banner-bg">
                  <span className="image-container hide-on-mobile">
                    <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/02.jpg" />
                  </span>
                  <span className="image-container hide-on-desktop">
                    <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/02.jpg" />
                  </span>
                </div>
Ravindra Kanojiya committed
97 98 99
                <div className="d-table">
                  <div className="d-table-cell">
                    <div className="container">
Ravindra Kanojiya committed
100
                      <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
Ravindra Kanojiya committed
101
                        <div className="row">
Ravindra Kanojiya committed
102
                          <div className="col-md-6">
Ravindra Kanojiya committed
103
                            <div className="slider-text">
Ravindra Kanojiya committed
104
                              <div className="banner-title">
Ravindra Kanojiya committed
105
                                <div className="banner-txt">
Ravindra Kanojiya committed
106 107 108 109 110 111
                                  <h1>Lorem ipsum dolor sit amet</h1>
                                  <div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
                                  <div className="disc">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                                    minim veniam, quis nostrud.
                                  </div>
Ravindra Kanojiya committed
112
                                </div>
Ravindra Kanojiya committed
113 114 115 116 117 118
                              </div>
                              <div className="common-btn">
                                <a className="btn btn-primary" href="/allergic-rhinitis">
                                  Explore Now
                                </a>
                              </div>
Ravindra Kanojiya committed
119
                            </div>
Ravindra Kanojiya committed
120
                          </div>
Ravindra Kanojiya committed
121
                        </div>
Ravindra Kanojiya committed
122
                      </motion.div>
Ravindra Kanojiya committed
123 124 125 126
                    </div>
                  </div>
                </div>
              </div>
Ravindra Kanojiya committed
127 128
            </SwiperSlide>
            <SwiperSlide>
Ravindra Kanojiya committed
129
              <div className="slider-item slider-item-03">
Ravindra Kanojiya committed
130 131 132 133 134 135 136 137
              <div className="home-banner-bg">
                  <span className="image-container hide-on-mobile">
                    <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/03.jpg" />
                  </span>
                  <span className="image-container hide-on-desktop">
                    <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/03.jpg" />
                  </span>
                </div>
Ravindra Kanojiya committed
138 139 140
                <div className="d-table">
                  <div className="d-table-cell">
                    <div className="container">
Ravindra Kanojiya committed
141
                      <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
Ravindra Kanojiya committed
142
                        <div className="row">
Ravindra Kanojiya committed
143
                          <div className="col-md-6">
Ravindra Kanojiya committed
144
                            <div className="slider-text">
Ravindra Kanojiya committed
145
                              <div className="banner-title">
Ravindra Kanojiya committed
146
                                <div className="banner-txt">
Ravindra Kanojiya committed
147 148 149 150 151 152
                                  <h1>Lorem ipsum dolor sit amet</h1>
                                  <div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
                                  <div className="disc">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                                    minim veniam, quis nostrud.
                                  </div>
Ravindra Kanojiya committed
153
                                </div>
Ravindra Kanojiya committed
154 155 156 157 158 159
                              </div>
                              <div className="common-btn">
                                <a className="btn btn-primary" href="/allergic-rhinitis">
                                  Explore Now
                                </a>
                              </div>
Ravindra Kanojiya committed
160
                            </div>
Ravindra Kanojiya committed
161
                          </div>
Ravindra Kanojiya committed
162
                        </div>
Ravindra Kanojiya committed
163
                      </motion.div>
Ravindra Kanojiya committed
164 165 166 167
                    </div>
                  </div>
                </div>
              </div>
Ravindra Kanojiya committed
168 169
            </SwiperSlide>
            <SwiperSlide>
Ravindra Kanojiya committed
170
              <div className="slider-item slider-item-04">
Ravindra Kanojiya committed
171 172 173 174 175 176 177 178
              <div className="home-banner-bg">
                  <span className="image-container hide-on-mobile">
                    <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/04.jpg" />
                  </span>
                  <span className="image-container hide-on-desktop">
                    <Image layout="fill" className="image img-fluid" alt="" src="/images/home-banner/04.jpg" />
                  </span>
                </div>
Ravindra Kanojiya committed
179 180 181
                <div className="d-table">
                  <div className="d-table-cell">
                    <div className="container">
Ravindra Kanojiya committed
182
                      <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
Ravindra Kanojiya committed
183
                        <div className="row">
Ravindra Kanojiya committed
184
                          <div className="col-md-6">
Ravindra Kanojiya committed
185
                            <div className="slider-text">
Ravindra Kanojiya committed
186
                              <div className="banner-title">
Ravindra Kanojiya committed
187
                                <div className="banner-txt">
Ravindra Kanojiya committed
188 189 190 191 192 193
                                  <h1>Lorem ipsum dolor sit amet</h1>
                                  <div className="title">WELCOME TO THE WORLD OF TRAVEL</div>
                                  <div className="disc">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
                                    minim veniam, quis nostrud.
                                  </div>
Ravindra Kanojiya committed
194
                                </div>
Ravindra Kanojiya committed
195 196 197 198 199 200
                              </div>
                              <div className="common-btn">
                                <a className="btn btn-primary" href="/allergic-rhinitis">
                                  Explore Now
                                </a>
                              </div>
Ravindra Kanojiya committed
201
                            </div>
Ravindra Kanojiya committed
202
                          </div>
Ravindra Kanojiya committed
203
                        </div>
Ravindra Kanojiya committed
204
                      </motion.div>
Ravindra Kanojiya committed
205 206 207 208
                    </div>
                  </div>
                </div>
              </div>
Ravindra Kanojiya committed
209 210
            </SwiperSlide>
          </Swiper>
Ravindra Kanojiya committed
211 212 213 214 215 216 217
        </div>
      </section>
    </>
  );
};

export default Banner;