remake Stocks & StocksSlider due updated schemas

src/app/page.tsx

@@ -3,7 +3,7 @@ import Stocks from '@/components/App/index/Stocks'
 export default function Home() {
   return (
     <>
-      <Stocks classes="w-full h-[60vh] xl:h-[65vh] sm:!h-[100svh] sm:h-[100vh]" />
+      <Stocks classes="w-full h-[65vh] sm:!h-[100svh] sm:h-[100vh]" />
     </>
   )
 }

src/components/App/index/Stocks.tsx

@@ -1,34 +1,36 @@
 import {unstable_noStore as noStore} from 'next/cache'
+import {client, urlForImage} from '@/lib/sanity'
 
-import {client} from '@/lib/sanity'
 import StocksSlider from '#/App/index/StocksSlider'
 
 const getData = async () => {
   noStore()
 
   const query = `
     *[_type == 'stocks'] {
-      images
+      title,
+      caption,
+      image
     }`
 
   const data = await client.fetch(query)
   return data
 }
 
-interface StocksProps {
-  classes: string
-}
-
-const Stocks: React.FC<StocksProps> = async ({classes}) => {
+const Stocks = async ({classes}) => {
   const stocks = await getData()
 
   if (!stocks) {
     return <mark>Произошла ошибка при получении данных!</mark>
   }
 
-  const images = stocks.map((stock) => stock.images).flat()
+  const sliderData = stocks.map((stock) => ({
+    imageUrl: urlForImage(stock.image.asset._ref).url(),
+    title: stock.title,
+    caption: stock.caption,
+  }))
 
-  return <StocksSlider images={images} classes={classes} />
+  return <StocksSlider sliderData={sliderData} classes={classes} />
 }
 
 export default Stocks

src/components/App/index/StocksSlider.tsx

@@ -1,7 +1,5 @@
 'use client'
 
-import {urlForImage} from '@/lib/sanity'
-
 import Image from 'next/image'
 import {Swiper, SwiperSlide} from 'swiper/react'
 import {Pagination, Autoplay} from 'swiper/modules'
@@ -11,16 +9,27 @@ import 'swiper/css/pagination'
 import '@/assets/stylesheets/stocks_slider.css'
 
 interface SliderProps {
-  images: string[]
+  sliderData: {
+    imageUrl: string
+    title: string
+    caption: string
+  }[]
   classes: string
 }
 
-const Slider: React.FC<SliderProps> = ({images, classes}) => {
+const Slider: React.FC<SliderProps> = ({sliderData, classes}) => {
   return (
-    <Swiper className={classes} loop={true} autoplay={{delay: 3500}} speed={1000} pagination={true} grabCursor={true} modules={[Pagination, Autoplay]}>
-      {images.map((image, index) => (
+    <Swiper className={classes} loop={true} speed={1000} pagination={{clickable: true}} grabCursor={true} modules={[Pagination, Autoplay]}>
+      {sliderData.map((slide, index) => (
         <SwiperSlide className="relative grid place-items-center" key={index}>
-          <Image className="absolute inset-0 block object-cover s-full" src={urlForImage(image).url()} fill={true} alt={`slide-${index + 1}`} />
+          <Image className="absolute inset-0 block object-cover s-full" src={slide.imageUrl} fill={true} alt={`акция ${index + 1}`} />
+
+          <div className="absolute inset-0 flex flex-col justify-center bg-black bg-opacity-50">
+            <div className="w-[70%] sm:w-[90%] mt-5 mx-auto space-y-2 text-white sm:text-center">
+              <h2 className="text-6xl font-medium uppercase xl:text-4xl xl:w-[80%] sm:text-3xl sm:w-full sm:mx-auto">{slide.title}</h2>
+              <p className="text-xl font-light sm:text-base sm:w-full sm:mx-auto">{slide.caption}</p>
+            </div>
+          </div>
         </SwiperSlide>
       ))}
     </Swiper>