Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning

Blame view

components/home/Banner.js 10.1 KB
Raw Normal View History Permalink
updated home page
7b495314
 
Ravindra Kanojiya committed
1 
import React from "react";
added new pages
4e17bce3
 
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";
updated home page
7b495314
 
Ravindra Kanojiya committed
12 13 14 15 16 
const Banner = () => {
  return (
    <>
      <section className="home-banner">
        <div>
added new pages
4e17bce3
 
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"
updated home page
7b495314
 
Ravindra Kanojiya committed
45 
          >
added new pages
4e17bce3
 
Ravindra Kanojiya committed
46 
            <SwiperSlide>
updated home page
7b495314
 
Ravindra Kanojiya committed
47 
              <div className="slider-item slider-item-01">
added new pages
4e17bce3
 
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>
updated home page
7b495314
 
Ravindra Kanojiya committed
56 57 58 
                <div className="d-table">
                  <div className="d-table-cell">
                    <div className="container">
added new pages
4e17bce3
 
Ravindra Kanojiya committed
59 
                      <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
updated home page
7b495314
 
Ravindra Kanojiya committed
60 
                        <div className="row">
added new pages
4e17bce3
 
Ravindra Kanojiya committed
61 
                          <div className="col-md-6">
updated home page
7b495314
 
Ravindra Kanojiya committed
62 
                            <div className="slider-text">
added new pages
4e17bce3
 
Ravindra Kanojiya committed
63 
                              <div className="banner-title">
updated home page
7b495314
 
Ravindra Kanojiya committed
64 
                                <div className="banner-txt">
added new pages
4e17bce3
 
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>
updated home page
7b495314
 
Ravindra Kanojiya committed
71 
                                </div>
added new pages
4e17bce3
 
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>
updated home page
7b495314
 
Ravindra Kanojiya committed
78 
                            </div>
added new pages
4e17bce3
 
Ravindra Kanojiya committed
79 
                          </div>
updated home page
7b495314
 
Ravindra Kanojiya committed
80 
                        </div>
added new pages
4e17bce3
 
Ravindra Kanojiya committed
81 
                      </motion.div>
updated home page
7b495314
 
Ravindra Kanojiya committed
82 83 84 85 
                    </div>
                  </div>
                </div>
              </div>
added new pages
4e17bce3
 
Ravindra Kanojiya committed
86 87 
            </SwiperSlide>
            <SwiperSlide>
updated home page
1e264089
 
Ravindra Kanojiya committed
88 
              <div className="slider-item slider-item-02">
added new pages
4e17bce3
 
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>
updated home page
1e264089
 
Ravindra Kanojiya committed
97 98 99 
                <div className="d-table">
                  <div className="d-table-cell">
                    <div className="container">
added new pages
4e17bce3
 
Ravindra Kanojiya committed
100 
                      <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
updated home page
1e264089
 
Ravindra Kanojiya committed
101 
                        <div className="row">
added new pages
4e17bce3
 
Ravindra Kanojiya committed
102 
                          <div className="col-md-6">
updated home page
1e264089
 
Ravindra Kanojiya committed
103 
                            <div className="slider-text">
added new pages
4e17bce3
 
Ravindra Kanojiya committed
104 
                              <div className="banner-title">
updated home page
1e264089
 
Ravindra Kanojiya committed
105 
                                <div className="banner-txt">
added new pages
4e17bce3
 
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>
updated home page
1e264089
 
Ravindra Kanojiya committed
112 
                                </div>
added new pages
4e17bce3
 
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>
updated home page
1e264089
 
Ravindra Kanojiya committed
119 
                            </div>
added new pages
4e17bce3
 
Ravindra Kanojiya committed
120 
                          </div>
updated home page
1e264089
 
Ravindra Kanojiya committed
121 
                        </div>
added new pages
4e17bce3
 
Ravindra Kanojiya committed
122 
                      </motion.div>
updated home page
1e264089
 
Ravindra Kanojiya committed
123 124 125 126 
                    </div>
                  </div>
                </div>
              </div>
added new pages
4e17bce3
 
Ravindra Kanojiya committed
127 128 
            </SwiperSlide>
            <SwiperSlide>
updated home page
1e264089
 
Ravindra Kanojiya committed
129 
              <div className="slider-item slider-item-03">
added new pages
4e17bce3
 
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>
updated home page
1e264089
 
Ravindra Kanojiya committed
138 139 140 
                <div className="d-table">
                  <div className="d-table-cell">
                    <div className="container">
added new pages
4e17bce3
 
Ravindra Kanojiya committed
141 
                      <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
updated home page
1e264089
 
Ravindra Kanojiya committed
142 
                        <div className="row">
added new pages
4e17bce3
 
Ravindra Kanojiya committed
143 
                          <div className="col-md-6">
updated home page
1e264089
 
Ravindra Kanojiya committed
144 
                            <div className="slider-text">
added new pages
4e17bce3
 
Ravindra Kanojiya committed
145 
                              <div className="banner-title">
updated home page
1e264089
 
Ravindra Kanojiya committed
146 
                                <div className="banner-txt">
added new pages
4e17bce3
 
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>
updated home page
1e264089
 
Ravindra Kanojiya committed
153 
                                </div>
added new pages
4e17bce3
 
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>
updated home page
1e264089
 
Ravindra Kanojiya committed
160 
                            </div>
added new pages
4e17bce3
 
Ravindra Kanojiya committed
161 
                          </div>
updated home page
1e264089
 
Ravindra Kanojiya committed
162 
                        </div>
added new pages
4e17bce3
 
Ravindra Kanojiya committed
163 
                      </motion.div>
updated home page
1e264089
 
Ravindra Kanojiya committed
164 165 166 167 
                    </div>
                  </div>
                </div>
              </div>
added new pages
4e17bce3
 
Ravindra Kanojiya committed
168 169 
            </SwiperSlide>
            <SwiperSlide>
updated home page
1e264089
 
Ravindra Kanojiya committed
170 
              <div className="slider-item slider-item-04">
added new pages
4e17bce3
 
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>
updated home page
7b495314
 
Ravindra Kanojiya committed
179 180 181 
                <div className="d-table">
                  <div className="d-table-cell">
                    <div className="container">
added new pages
4e17bce3
 
Ravindra Kanojiya committed
182 
                      <motion.div variants={slideFromRight(0.4)} initial={"hidden"} whileInView={"show"} viewport={{ once: false, amount: 0.2 }}>
updated home page
7b495314
 
Ravindra Kanojiya committed
183 
                        <div className="row">
added new pages
4e17bce3
 
Ravindra Kanojiya committed
184 
                          <div className="col-md-6">
updated home page
7b495314
 
Ravindra Kanojiya committed
185 
                            <div className="slider-text">
added new pages
4e17bce3
 
Ravindra Kanojiya committed
186 
                              <div className="banner-title">
updated home page
7b495314
 
Ravindra Kanojiya committed
187 
                                <div className="banner-txt">
added new pages
4e17bce3
 
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>
updated home page
7b495314
 
Ravindra Kanojiya committed
194 
                                </div>
added new pages
4e17bce3
 
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>
updated home page
7b495314
 
Ravindra Kanojiya committed
201 
                            </div>
added new pages
4e17bce3
 
Ravindra Kanojiya committed
202 
                          </div>
updated home page
7b495314
 
Ravindra Kanojiya committed
203 
                        </div>
added new pages
4e17bce3
 
Ravindra Kanojiya committed
204 
                      </motion.div>
updated home page
7b495314
 
Ravindra Kanojiya committed
205 206 207 208 
                    </div>
                  </div>
                </div>
              </div>
added new pages
4e17bce3
 
Ravindra Kanojiya committed
209 210 
            </SwiperSlide>
          </Swiper>
updated home page
7b495314
 
Ravindra Kanojiya committed
211 212 213 214 215 216 217 
        </div>
      </section>
    </>
  );
};

export default Banner;