home page banner corrections updated

components/sections/home2/MobileBanner.js

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

public/assets/css/module-css/banner.css

@@ -129,6 +129,14 @@
   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{
   position: absolute;
   content: '';
@@ -201,17 +209,17 @@
   transition: all 1000ms ease;
 }
 
-@media (max-width: 425px) {
+@media (max-width: 500px) {
   .banner-carousel .content-box .upper-text {
-    color: #fff;
-    font-size: 18px;
+    color: #fff !important;
+    font-size: 18px !important;
     line-height: 24px;
   }
 }
 
-@media (max-width: 425px) {
+@media (max-width: 500px) {
   .banner-carousel .content-box h2 {
-    color: #fff;
+    color: #fff !important;
     font-size: 24px;
     line-height: 24px;
   }

public/assets/css/style.css

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