Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 1e264089 by Ravindra Kanojiya
Options

updated home page

1 parent 7b495314
Inline Side-by-side
Showing 10 changed files with 198 additions and 11 deletions
components/home/Banner.js
...@@ -7,7 +7,8 @@ const Banner = () => { ...@@ -7,7 +7,8 @@ const Banner = () => {
const projects = { const projects = {
responsive: { responsive: {
0: { 0: {
items: 1 items: 1,
nav: false
}, },
450: { 450: {
items: 1 items: 1
...@@ -31,7 +32,7 @@ const Banner = () => { ...@@ -31,7 +32,7 @@ const Banner = () => {
dots={false} dots={false}
nav={true} nav={true}
responsive={projects.responsive} responsive={projects.responsive}
autoplay={false} autoplay={true}
autoplayTimeout={5000} autoplayTimeout={5000}
center={false} center={false}
loop={false} loop={false}
...@@ -66,7 +67,63 @@ const Banner = () => { ...@@ -66,7 +67,63 @@ const Banner = () => {
</div> </div>
</div> </div>
<div className="item"> <div className="item">
<div className="slider-item slider-item-01"> <div className="slider-item slider-item-02">
<div className="d-table">
<div className="d-table-cell">
<div className="container">
<div className="row">
<div className="col-md-6">
<div className="slider-text">
<div className="banner-title">
<div className="banner-txt">
<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>
</div>
</div>
<div className="common-btn">
<a className="btn btn-primary" href="/allergic-rhinitis">
Explore Now
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="item">
<div className="slider-item slider-item-03">
<div className="d-table">
<div className="d-table-cell">
<div className="container">
<div className="row">
<div className="col-md-6">
<div className="slider-text">
<div className="banner-title">
<div className="banner-txt">
<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>
</div>
</div>
<div className="common-btn">
<a className="btn btn-primary" href="/allergic-rhinitis">
Explore Now
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="item">
<div className="slider-item slider-item-04">
<div className="d-table"> <div className="d-table">
<div className="d-table-cell"> <div className="d-table-cell">
<div className="container"> <div className="container">
......
components/home/LetDiscover.js
...@@ -9,7 +9,8 @@ const LetDiscover = () => { ...@@ -9,7 +9,8 @@ const LetDiscover = () => {
const projects = { const projects = {
responsive: { responsive: {
0: { 0: {
items: 2 items: 2,
margin: 20
}, },
450: { 450: {
items: 3 items: 3
......
components/layout/Footer.js
...@@ -4,6 +4,7 @@ import { Button } from "react-bootstrap"; ...@@ -4,6 +4,7 @@ import { Button } from "react-bootstrap";
const Footer = () => { const Footer = () => {
return ( return (
<>
<footer> <footer>
<div className="container"> <div className="container">
<div className="row"> <div className="row">
...@@ -32,7 +33,7 @@ const Footer = () => { ...@@ -32,7 +33,7 @@ const Footer = () => {
</div> </div>
<div className="row"> <div className="row">
<div className="col-md-3"> <div className="col-md-3">
<div className="footer-link"> <div className="footer-link mtp-0">
<h3>QUICK LINKS</h3> <h3>QUICK LINKS</h3>
<ul> <ul>
<li> <li>
...@@ -137,6 +138,16 @@ const Footer = () => { ...@@ -137,6 +138,16 @@ const Footer = () => {
</div> </div>
</div> </div>
</footer> </footer>
<div className="copyright">
<div className="container">
<div className="row">
<div className="col-12">
<div>Copyright © 2024 ZanGO. All Rights Reserved</div>
</div>
</div>
</div>
</div>
</>
); );
}; };
......
components/layout/Layout.js
...@@ -5,7 +5,7 @@ import Footer from "./Footer"; ...@@ -5,7 +5,7 @@ import Footer from "./Footer";
import { ToastContainer } from "react-toastify"; import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
const Layout = ({ children, title = "", description = "" }) => { const Layout = ({ children, title = "Zango", description = "" }) => {
return ( return (
<div> <div>
<Head> <Head>
......
styles/globals.css
...@@ -285,7 +285,7 @@ h6 { ...@@ -285,7 +285,7 @@ h6 {
transition: transform 0.5s; transition: transform 0.5s;
transform: translateY(100px); transform: translateY(100px);
background-color: #fff; background-color: #fff;
border-radius: 0 0 20px 20px;
} }
.header_wrap .navbar { .header_wrap .navbar {
color: #fff; color: #fff;
...@@ -294,6 +294,10 @@ h6 { ...@@ -294,6 +294,10 @@ h6 {
left: 0; left: 0;
top: 0; top: 0;
z-index: 9; z-index: 9;
border-radius: 0 0 20px 20px;
border-radius: 0rem 0rem 1.25rem 1.25rem;
background: #FFF;
box-shadow: 0px 4px 25px 2px rgba(0, 0, 0, 0.25);
} }
.header_wrap.stick .navbar-expand-lg .navbar-nav .nav-link{ .header_wrap.stick .navbar-expand-lg .navbar-nav .nav-link{
color: #000; color: #000;
...@@ -319,8 +323,17 @@ h6 { ...@@ -319,8 +323,17 @@ h6 {
.slider-item.slider-item-01 { .slider-item.slider-item-01 {
background: url(/images/home-banner/01.jpg) no-repeat; background: url(/images/home-banner/01.jpg) no-repeat;
} }
.slider-item.slider-item-02 {
background: url(/images/home-banner/02.jpg) no-repeat;
}
.slider-item.slider-item-03 {
background: url(/images/home-banner/03.jpg) no-repeat;
}
.slider-item.slider-item-04 {
background: url(/images/home-banner/04.jpg) no-repeat;
}
.home-banner{ .home-banner{
padding-top: 135px; padding-top: 119px;
margin-top: -135px; margin-top: -135px;
} }
.container-fluid { .container-fluid {
...@@ -384,7 +397,7 @@ h6 { ...@@ -384,7 +397,7 @@ h6 {
.owl-custom01.owl-theme .owl-nav { .owl-custom01.owl-theme .owl-nav {
position: absolute; position: absolute;
left: 0; left: 0;
top: calc(43% + 0px); top: calc(33% + 0px);
margin: 0; margin: 0;
width: 100%; width: 100%;
} }
...@@ -736,7 +749,13 @@ footer hr{ ...@@ -736,7 +749,13 @@ footer hr{
margin: 2.5rem 0; margin: 2.5rem 0;
opacity: inherit; opacity: inherit;
} }
.copyright{
background: #000;
color: #fff;
font-size: 16px;
text-align: center;
padding: 1rem;
}
...@@ -769,4 +788,103 @@ footer hr{ ...@@ -769,4 +788,103 @@ footer hr{
width: 21px; width: 21px;
margin-left: 10px; margin-left: 10px;
} }
}
\ No newline at end of file \ No newline at end of file
}
@media (max-width: 767px) {
footer .subscribe input {
width: 67%;
}
.footer-link h3 {
font-size: 20px;
}
footer .footer-link.mtp-0 {
padding-top: 0;
}
footer .footer-link {
padding-top: 2rem;
}
.signUp-to-experience-our-platform .title {
font-size: 32px;
line-height: 33px;
margin-bottom: 0.5rem;
}
.signUp-to-experience-our-platform-session{
background: url(../public/images/sign-up-exp-bg-m.png) no-repeat;
background-size: 100%;
object-fit: cover;
padding: 1rem;
color: #fff;
}
.testimonial-item .name {
font-size: 20px;
line-height: 22px;
}
.testimonial-item {
padding: 0 0rem;
}
.gift-an-experience-inner .img{
padding-top: 3rem;
}
.gift-an-experience-inner .content .title {
font-size: 32px;
line-height: 35px;
}
.gift-an-experience-inner {
padding: 1rem;
border-radius: 27px;
background: #F6F6F6 url(/images/gift-experience-bg-m.png) no-repeat center bottom;
}
.carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-next {
right: calc(-9% + 1px);
}
.carousal-c .owl-custom01.owl-carousel .owl-nav button.owl-prev {
left: calc(-9% + 1px);
}
.slider-item.slider-item-01 {
background: url(/images/home-banner/01-m.jpg) no-repeat;
}
.slider-item {
height: 200vw;
border-radius: 0 0 25px 25px;
background-position: 100% !important;
padding-top: 2rem;
}
.slider-item .d-table {
display: inherit!important;
}
.home-banner .banner-txt h1 {
font-size: 20px;
line-height: 22px;
}
.home-banner .banner-txt .title {
font-size: 32px;
line-height: 35px;
}
.searchbar-h input {
font-size: 13px;
}
.searchbar-h {
height: 55px;
padding: 1rem;
}
.searchbar-h .search-icon {
right: 8px;
top: 11px;
}
.searchbar-session {
margin-top: -33px;
}
.let-discover-session {
padding: 2rem 0;
}
.head01 .title {
font-size: 16px;
line-height: 18px;
}
.head01 h2 {
font-size: 32px;
line-height: 33px;
}
.carousal-c {
padding: 0 1rem;
}
}
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!