update text display on home page

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;
@@ -2859,7 +2859,7 @@ p {
 .appie-features-tabs-btn .nav a {
   border-right: 3px solid #e8eaef;
   border-radius: 0;
-  font-size: 15px;
+  font-size: 18px;
   font-weight: 500;
   color: #505056;
 }
@@ -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='' />

app/components/SelectFeatutes.js

@@ -116,7 +116,7 @@ function SelectFeatures({ className }) {
                                                 Reward <br /> Achievement
                                             </h3>
                                             <p>
-                                                Reward with points, badges, recognition, or money rewards with easy steps
+                                                Reward with points, badges, recognition, or rewards with easy steps
                                             </p>
                                             <a className="main-btn" href="/about-us">
                                                 Learn More

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}>

docker/Dockerfile

@@ -135,9 +135,9 @@ COPY . /app
 
 # start app
 #CMD ["serve", "-s", "build"]
-CMD ["npm", "run", "dev"]
+#CMD ["npm", "run", "dev"]
 
 #RUN npm run build
 #CMD ["npm", "run", "start"]
-# CMD ["sh", "-c", "next build && next start"]
+CMD ["sh", "-c", "next build && next start"]