bug fixed

app/assets/css/main.css

@@ -8641,27 +8641,36 @@ LND PAGE STYLE STARTS HERE
 
 /* -----------Interface_Section-Css-Start FOR HOME IMAGE SLIDERS ----------------- */
 /* interface wraper */
-/* .interface_section .screen_slider {
+.interface_section .screen_slider {
   margin-top: 35px;
-  min-height: 520px;
+  /* min-height: 520px; */
   display: flex;
   align-items: center;
-} */
-
-.carousel-container{
-  padding: 120px 0px 50px;
 }
 
-.react-multi-carousel, .slick-slide{
+/* interface images */
+.interface_section .owl-item .screen_frame_img img {
   transform: scale(.9);
-  transition: all 2s;
-  /* border: 2px solid #000;
+  /* border: 2px solid #000; */
+  border-radius: 20px;
+  transition: 1s all;
   margin: 0 auto;
   height: 520px;
-  width: auto; */
+  width: auto;
 }
 
-.react-multi-carousel-item--active, .slick-center{
+.interface_section .owl-item.center .screen_frame_img img {
   transform: scale(1);
-  transition: all 2s;
+  /* border: 3px solid #000; */
+  /* padding: 5px; */
+}
+
+.carousel .slider {
+  height: auto !important;
+  width: 300px !important;
+  transform: scale(.9);
+}
+
+.carousel div {
+  gap: 5px !important;
 }

app/components/FeaturedScreenTwo.js

@@ -1,83 +0,0 @@
-"use client"
-// NOTE React-Slick and slick-carousel goes together. DO install both
-import React from 'react';
-import Slider from 'react-slick';
-import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css';
-import Image from 'next/image'
-
-export default function FeaturedScreenTwo() {
-    const settings = {
-        dots: true,
-        autoplay: true,
-        infinite: true,
-        centerMode: true,
-        
-        className: 'center',
-        centerPadding: '60px',
-      
-        slidesToShow: 5,
-        slidesToScroll: 1,
-        speed: 4000,
-        // autoplaySpeed: 2000,
-        cssEase: "linear",
-      
-        responsive: [
-          {
-            breakpoint: 1024,
-            settings: {
-              slidesToShow: 5,
-              slidesToScroll: 1,
-            //   initialSlide: 1,
-            //   infinite: true,
-            //   dots: true,
-            },
-          },
-          {
-            breakpoint: 600,
-            settings: {
-              slidesToShow: 3,
-              slidesToScroll: 1,
-            },
-          },
-          {
-            breakpoint: 480,
-            settings: {
-              slidesToShow: 1,
-              slidesToScroll: 1,
-            },
-          },
-        ],
-      };
-    
-    return (
-        <div className='carousel-container'>
-          <Slider
-            {...settings}
-          >
-            {/* here you can also pass any other element attributes. Also, you can use your custom components as slides */}
-            <div className='slider-img-con'>
-              <img src={'/assets/images/slider/app_sliders/screen_1.png'} alt="image" />
-            </div>
-            <div className='slider-img-con'>
-              <img src={'/assets/images/slider/app_sliders/screen_2.png'} alt="image" />
-            </div>
-            <div className='slider-img-con'>
-              <img src={'/assets/images/slider/app_sliders/screen_3.png'} alt="image" />
-            </div>
-            <div className='slider-img-con'>
-              <img src={'/assets/images/slider/app_sliders/screen_6.png'} alt="image" />
-            </div>
-            <div className='slider-img-con'>
-              <img src={'/assets/images/slider/app_sliders/screen_4.png'} alt="image" />
-            </div>
-            <div className='slider-img-con'>
-              <img src={'/assets/images/slider/app_sliders/screen_7.png'} alt="image" />
-            </div>
-            <div className='slider-img-con'>
-              <img src={'/assets/images/slider/app_sliders/screen_5.png'} alt="image" />
-            </div>
-          </Slider>
-        </div>
-      );
-}

app/components/HomeOne.js

@@ -12,7 +12,7 @@ import AfterHero from './AfterHero';
 // import NextAfterHero from './NextAfterHero';
 import BackToTop from './BackToTop';
 import SelectFeatures from "@/app/components/SelectFeatutes";
-import FeaturedScreenTwo from './FeaturedScreenTwo'
+//import FeaturedScreenTwo from './FeaturedScreenTwo'
 
 
 
@@ -28,7 +28,7 @@ function HomeOne() {
            {/*<ServicesHomeOne />*/}
            <TrafficHomeOne />
            {/*<TrafficHomeTwo />*/}
-           <FeaturedScreenTwo />
+           {/*<FeaturedScreenTwo /> olu temp */}
            <BlogHomeOne />
            <FooterHomeOne />
            <BackToTop className='' />

app/use-cases/UseCase.js

@@ -20,7 +20,7 @@ function UseCase() {
                             <div key={index} className="col-12 col-md-6 col-lg-4">
                                 <div className="post-item-1">
 
-                                    {<Image width='auto' height='auto' src={blgImg} alt={i.title} />}
+                                    {<Image width='100' height='100' src={blgImg} alt={i.title} />}
                                     <div className="b-post-details">
                                         <h3>
                                             <Link href={process.env.NEXT_PUBLIC_DASH_URL_LOGIN}>