I'm using nextjs app router... Put the black gradient  at the very top of the slider... just do the gradient issue don't manipulate with anything else...
'use client';

import React, { useState, useRef, useEffect } from 'react';
import Image from 'next/image';
import dynamic from 'next/dynamic';

const Slider = dynamic(() => import('react-slick'), { ssr: false });

const ClientSideStyles = () => {
    useEffect(() => {
        import('slick-carousel/slick/slick.css');
        import('slick-carousel/slick/slick-theme.css');
    }, []);
    return null;
};

// Slide component
const CarouselSlide = ({ image, title, buttonText }) => (
    <div className="relative w-full min-h-96">
        <Image
            src={image}
            alt={title}
            fill
            style={{ objectFit: 'cover' }}
            priority
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent">
            <div className="absolute bottom-8 left-6 text-white">
                <h2 className="text-2xl sm:text-3xl md:text-4xl font-medium mb-4 max-w-[204px] leading-tight">
                    {title}
                </h2>
                <button className="border border-white px-4 py-2 text-xs sm:text-sm rounded hover:bg-white hover:text-black transition-colors duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
                    {buttonText}
                </button>
            </div>
        </div>
    </div>
);

// Custom Dots Component
const CustomDots = ({ onDotClick, activeIndex, slidesLength }) => (
    <div className="custom-dots flex items-center gap-1.5 absolute bottom-4 left-6">
        {[...Array(slidesLength)].map((_, i) => (
            <button
                key={i}
                onClick={() => onDotClick(i)}
                className={`w-2 h-2 rounded-full transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50
          ${i === activeIndex ? 'bg-[rgba(145,124,103,0.2)] border border-black' : 'bg-black'}`}
                aria-label={`Go to slide ${i + 1}`}
            />
        ))}
    </div>
);

const Carousel = () => {
    const [activeSlide, setActiveSlide] = useState(0);
    const sliderRef = useRef(null);

    const slides = [
        {
            image: '/woman.png',
            title: 'Find Our Women Jacket',
            buttonText: 'Discover more',
        },
        {
            image: '/woman.png',
            title: 'Explore New Arrivals',
            buttonText: 'Shop Now',
        },
        {
            image: '/woman.png',
            title: 'Summer Collection',
            buttonText: 'Browse Collection',
        },
        {
            image: '/woman.png',
            title: 'Exclusive Offers',
            buttonText: 'Learn More',
        },
        // Add more slides as needed
    ];

    const settings = {
        dots: false,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 5000,
        arrows: false,
        beforeChange: (current, next) => setActiveSlide(next),
        accessibility: true,
        adaptiveHeight: true,
        swipeToSlide: true,
        touchThreshold: 10,
        useCSS: true,
        useTransform: true,
    };

    const handleDotClick = (index) => {
        if (sliderRef.current) {
            sliderRef.current.slickGoTo(index);
        }
    };

    return (
        <>
            <ClientSideStyles />
            <div className="relative overflow-hidden">
                <Slider ref={sliderRef} {...settings}>
                    {slides.map((slide, index) => (
                        <CarouselSlide key={index} {...slide} />
                    ))}
                </Slider>
                <CustomDots
                    onDotClick={handleDotClick}
                    activeIndex={activeSlide}
                    slidesLength={slides.length}
                />
            </div>
        </>
    );
};

export default Carousel;
Figma code:
/* Frame 4 */

position: absolute;
width: 402px;
height: 419px;
left: 0px;
top: 44px;

background: rgba(30, 30, 30, 0.7);


/* Rectangle 434 */

position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;

background: url(image.png);


/* Rectangle 435 */

position: absolute;
left: 100.11%;
right: -100.21%;
top: 23.93%;
bottom: 50.34%;

background: linear-gradient(360deg, #111111 0%, rgba(17, 17, 17, 0.991353) 6.6%, rgba(17, 17, 17, 0.96449) 13.19%, rgba(17, 17, 17, 0.91834) 19.79%, rgba(17, 17, 17, 0.852589) 26.38%, rgba(17, 17, 17, 0.768225) 32.98%, rgba(17, 17, 17, 0.668116) 39.57%, rgba(17, 17, 17, 0.557309) 46.17%, rgba(17, 17, 17, 0.442691) 52.77%, rgba(17, 17, 17, 0.331884) 59.36%, rgba(17, 17, 17, 0.231775) 65.96%, rgba(17, 17, 17, 0.147411) 72.55%, rgba(17, 17, 17, 0.0816599) 79.15%, rgba(17, 17, 17, 0.03551) 85.74%, rgba(17, 17, 17, 0.0086472) 92.34%, rgba(17, 17, 17, 0) 98.94%);
transform: matrix(-1, 0, 0, -1, 0, 0);


/* Frame 5 */

/* Auto layout */
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 6px;

position: absolute;
left: 6.47%;
right: 78.86%;
top: 93.11%;
bottom: 4.41%;



/* Ellipse 1 */

width: 4px;
height: 4px;

background: #000000;

/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;


/* Ellipse 4 */

width: 4px;
height: 4px;

background: #000000;

/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;


/* Ellipse 5 */

width: 4px;
height: 4px;

background: #000000;

/* Inside auto layout */
flex: none;
order: 2;
flex-grow: 0;


/* Frame 6 */

/* Auto layout */
display: flex;
flex-direction: row;
align-items: center;
padding: 2px;
gap: 10px;

width: 8px;
height: 8px;

background: rgba(145, 124, 103, 0.2);
border: 0.5px solid #000000;
border-radius: 4px;

/* Inside auto layout */
flex: none;
order: 3;
flex-grow: 0;


/* Ellipse 8 */

width: 4px;
height: 4px;

background: #000000;

/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;


/* Ellipse 6 */

width: 4px;
height: 4px;

background: #000000;

/* Inside auto layout */
flex: none;
order: 4;
flex-grow: 0;


/* Ellipse 7 */

width: 4px;
height: 4px;

background: #000000;

/* Inside auto layout */
flex: none;
order: 5;
flex-grow: 0;


/* Frame 3 */

/* Auto layout */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0px;
gap: 107px;

position: absolute;
width: 362px;
left: calc(50% - 362px/2);
top: 3.82%;
bottom: 90.95%;



/* Frame 2 */

/* Auto layout */
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 12px;

margin: 0 auto;
width: 72px;
height: 18px;


/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;


/* Frame */

width: 18px;
height: 18px;


/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;


/* Vector */

position: absolute;
left: 15.62%;
right: 15.62%;
top: 28.12%;
bottom: 28.12%;

border: 1px solid #FFFFFF;


/* Frame */

width: 18px;
height: 18px;


/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;


/* Vector */

position: absolute;
left: 12.5%;
right: 12.5%;
top: 12.5%;
bottom: 12.5%;

border: 1px solid #FFFFFF;


/* SATEEN */

margin: 0 auto;
width: 61px;
height: 19px;

font-family: 'Chivo';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 19px;
/* identical to box height */

color: #FFFFFF;


/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;


/* Frame 3 */

/* Auto layout */
display: flex;
flex-direction: row;
align-items: center;
padding: 0px;
gap: 12px;

margin: 0 auto;
width: 72px;
height: 18px;


/* Inside auto layout */
flex: none;
order: 2;
flex-grow: 0;


/* Frame */

width: 18px;
height: 18px;


/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;


/* Vector */

position: absolute;
left: 18.75%;
right: 18.75%;
top: 9.38%;
bottom: 9.37%;

border: 1px solid #FFFFFF;


/* Vector */

width: 13.5px;
height: 12.38px;

border: 1px solid #FFFFFF;

/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;


/* Frame */

width: 18px;
height: 18px;


/* Inside auto layout */
flex: none;
order: 2;
flex-grow: 0;


/* Vector */

position: absolute;
left: 13.02%;
right: 13.02%;
top: 9.38%;
bottom: 9.38%;

border: 1px solid #FFFFFF;


/* Frame 31 */

box-sizing: border-box;

position: absolute;
width: 103px;
height: 28px;
left: calc(50% - 103px/2 - 120.5px);
top: 287px;

border: 1px solid #FFFFFF;
border-radius: 4px;


/* Discover more */

position: absolute;
width: 84px;
height: 14px;
left: calc(50% - 84px/2 - 0.5px);
top: 7px;

font-family: 'Chivo';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;

color: #FFFFFF;



/* Find Our Women Jacket */

position: absolute;
width: 204px;
height: 58px;
left: 26px;
top: 221px;

font-family: 'Chivo';
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 29px;

color: #FFFFFF;