slider missing component added

app/assets/css/main.css

@@ -2046,7 +2046,7 @@ p {
   right: -30px;
   top: 50%;
   transform: translateY(-50%);
-  box-shadow: 0px 30px 70px 0px rgba(68, 1, 15, 0.2);
+  /* box-shadow: 0px 30px 70px 0px rgba(68, 1, 15, 0.2); */
 }
 .appie-hero-thumb::before {
   position: absolute;
@@ -8641,36 +8641,27 @@ 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;
 }
 
-/* interface images */
-.interface_section .owl-item .screen_frame_img img {
+.react-multi-carousel, .slick-slide{
   transform: scale(.9);
-  /* border: 2px solid #000; */
-  border-radius: 20px;
-  transition: 1s all;
+  transition: all 2s;
+  /* border: 2px solid #000;
   margin: 0 auto;
   height: 520px;
-  width: auto;
+  width: auto; */
 }
 
-.interface_section .owl-item.center .screen_frame_img img {
+.react-multi-carousel-item--active, .slick-center{
   transform: scale(1);
-  /* border: 3px solid #000; */
-  /* padding: 5px; */
-}
-
-.carousel .slider {
-  height: auto !important;
-  width: 300px !important;
-  transform: scale(.9);
-}
-
-.carousel div {
-  gap: 5px !important;
+  transition: all 2s;
 }

app/components/FeaturedScreenTwo.js

@@ -0,0 +1,83 @@
+"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/HeroHomeOne.js

@@ -3,6 +3,7 @@ import React from 'react';
 import Image from 'next/image'
 
 import heroThumbTwo from '../assets/images/app-pic.png';
+import AI from '../assets/images/home/ai-assist.png'
 
 import CustomSlider from './customSlider/CustomSlider'
 
@@ -74,7 +75,7 @@ function HeroHomeOne() {
                   data-wow-delay="600ms"
                 >
                   <Image
-                    src={heroThumbTwo}
+                    src={AI}
                     width={'100%'}
                     height={'100%'}
                     alt="Image"

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 /> olu temp */}
+           <FeaturedScreenTwo />
            <BlogHomeOne />
            <FooterHomeOne />
            <BackToTop className='' />