Untitled

import React, { useRef, useState } from 'react';
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';



// import required modules
import { Pagination,Autoplay } from 'swiper/modules';

export default function Carousal() {
  return (
    <>
      <Swiper pagination={true}  autoplay={{
        delay: 3000, // Set delay to 1000ms (1 second)
        disableOnInteraction: false, // Continue autoplay even if user interacts
        
      }}    modules={[Pagination, Autoplay]}className="mySwiper">
        <SwiperSlide >
        <div className='w-full h-full  bg-red-500 flex flex-col justify-end items-end '>
            <div className='flex justify-center items-center flex-col p-10 mb-12 w-full'> 
                <p className='font-semibold my-2'>Lead Management</p>
                <p className='text-sm'>Efficiently organize and track your leads for maximum conversion potential.</p>
            </div>
        </div>
        </SwiperSlide>
        <SwiperSlide>
        <div className='w-full h-full  bg-red-200 flex flex-col justify-end items-end '>
        <div className='flex justify-center items-center flex-col p-10 mb-12 w-full'> 
            <p className='font-semibold my-2'>WhatsApp Integration</p>
            <p className='text-sm'>Seamlessly connect with leads through integrated WhatsApp communication.</p>
        </div>
        </div>
        </SwiperSlide>
        <SwiperSlide >
        <div className='w-full h-full  bg-red-300 flex flex-col justify-end items-end '>
        <div className='flex justify-center items-center flex-col p-10 mb-12 w-full'> 
            <p className='font-semibold my-2'>Lead Conversion</p>
            <p className='text-sm'>Transform prospects into customers with optimized lead conversion strategies.</p>
        </div>
        </div>
        </SwiperSlide>
        <SwiperSlide>
        <div className='w-full h-full  bg-red-400 flex flex-col justify-end items-end '>
        <div className='flex justify-center items-center flex-col p-10 mb-12 w-full'> 
            <p className='font-semibold my-2'>Security and Support</p>
            <p className='text-sm'>Protect your data with top-notch security and get help from our dedicated support team.</p>
        </div>
        </div>
        </SwiperSlide>
        
      </Swiper>
    </>
  );
}