MetatroncubeSoftwareSolutions/rapharehap
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home page banner corrections updated

Browse Source
This commit is contained in:
Alaguraj0361 2025-09-16 23:18:05 +05:30
parent 8a73856d25
commit c17ead6b30
3 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/sections/home2/MobileBanner.js
View File

@ -14,7 +14,7 @@ const swiperOptions = {
slidesPerView: 1, slidesPerView: 1,
spaceBetween: 0, spaceBetween: 0,
autoplay: { autoplay: {
delay: 5000, delay: 10000,
disableOnInteraction: false, disableOnInteraction: false,
}, },
loop: true, loop: true,
@ -110,7 +110,10 @@ export default function MobileBanner() {
if (!isMobile) return null; if (!isMobile) return null;
return ( return (
<section className="banner-style-two p_relative"> <section
className="banner-style-two p_relative"
style={{ minHeight: '100vh', position: 'relative' }}
>
<Swiper <Swiper
{...swiperOptions} {...swiperOptions}
className="banner-carousel" className="banner-carousel"
@ -124,43 +127,48 @@ export default function MobileBanner() {
<motion.div <motion.div
key={`slide-${index}`} key={`slide-${index}`}
className="slide-item" className="slide-item"
style={{ minHeight: '100vh', position: 'relative' }}
variants={variants[slide.variant]} variants={variants[slide.variant]}
initial="initial" initial="initial"
animate="animate" animate="animate"
exit="exit" exit="exit"
transition={transition} transition={transition}
> >
{/* full-height background */}
<div <div
className="bg-layer" className="bg-layer"
style={{ style={{
backgroundImage: `url(${slide.bgImage})`, position: 'absolute',
backgroundSize: 'cover', top: 0,
backgroundPosition: 'center', left: 0,
width: '100%', width: '100%',
height: '100%', height: '100%',
minHeight: '400px' backgroundImage: `url(${slide.bgImage})`,
backgroundSize: 'cover',
backgroundPosition: 'center'
}} }}
></div> />
{/* centered content */}
<div <div
className="auto-container" className="auto-container"
style={{ style={{
minHeight: '400px', position: 'relative',
zIndex: 1,
minHeight: '100vh',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center' alignItems: 'end',
paddingBottom:"20px"
}} }}
> >
{!slide.hideContent && ( {!slide.hideContent && (
<div <div
className={`content-box custom-content-box ${slide.contentStyle || ''}`} className={`content-box custom-content-box ${slide.contentStyle || ''}`}
style={{
transform: "translateY(200px)",
}}
> >
<span className="upper-text">{slide.upperText}</span> <span className="upper-text">{slide.upperText}</span>
<h2> <h2>
{slide.title} <span>{slide.titleSpan}</span> {slide.titleEnd} {slide.title} {slide.titleSpan} {slide.titleEnd}
</h2> </h2>
<p>{slide.subtitle}</p> <p>{slide.subtitle}</p>
<p>{slide.description}</p> <p>{slide.description}</p>
@ -170,10 +178,8 @@ export default function MobileBanner() {
</Link> </Link>
</div> </div>
</div> </div>
)} )}
</div> </div>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>

18
public/assets/css/module-css/banner.css
View File

@ -129,6 +129,14 @@
padding: 150px 0px 150px 0px; padding: 150px 0px 150px 0px;
} }
@media (max-width:768px) {
.banner-carousel .swiper-slide {
padding: 0px;
height: 100%;
/* margin-top: 100px; */
}
}
.banner-carousel .swiper-slide:before{ .banner-carousel .swiper-slide:before{
position: absolute; position: absolute;
content: ''; content: '';
@ -201,17 +209,17 @@
transition: all 1000ms ease; transition: all 1000ms ease;
} }
@media (max-width: 425px) { @media (max-width: 500px) {
.banner-carousel .content-box .upper-text { .banner-carousel .content-box .upper-text {
color: #fff; color: #fff !important;
font-size: 18px; font-size: 18px !important;
line-height: 24px; line-height: 24px;
} }
} }
@media (max-width: 425px) { @media (max-width: 500px) {
.banner-carousel .content-box h2 { .banner-carousel .content-box h2 {
color: #fff; color: #fff !important;
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 24px;
} }

4
public/assets/css/style.css
View File

@ -3258,9 +3258,9 @@
padding: 50px; padding: 50px;
} }
@media (max-width: 425px) { @media (max-width: 500px) {
.custom-content-box { .custom-content-box {
padding: 35px; padding: 0px;
} }
} }