pre fix commit

src/components/screens/home/blocks/Review.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import Slider from 'react-slick'
 import styled from 'styled-components'
 
@@ -15,12 +16,18 @@ export const ReviewsContainer = styled.div`
 		gap: 30px;
 		background: ${(props) => props.theme.colors.black};
 		max-width: 580px;
+		height: 190px;
 		border-radius: 12px;
 		color: ${(props) => props.theme.colors.white};
 		display: flex;
 
 		img {
 			border-radius: 100px;
+			height: 120px;
+			max-height: 120px;
+			width: 120px;
+			min-width: 120px;
+			object-fit: cover;
 		}
 	}
 
@@ -197,24 +204,46 @@ export default function Review({}: Props) {
 		]
 	}
 
+	const [users, setUsers] = useState([
+		{
+			name: 'Анна Иванова',
+			image: '/review/person_1.jpg',
+			review:
+				'Профессиональное и сочувственное обслуживание. Помогли организовать похороны без лишних хлопот. Благодарна за их поддержку в трудный момент.'
+		},
+		{
+			name: 'Сергей Петров',
+			image: '/review/person_2.jpg',
+			review:
+				'Отличное соотношение цены и качества услуг. Все выполнено аккуратно и в срок. Рекомендую это агентство в сложные времена.'
+		},
+		{
+			name: 'Елена Козлова',
+			image: '/review/person_3.jpg',
+			review:
+				'Искренне признательна за заботу и профессионализм. Организация похорон прошла гладко, учли все наши пожелания. Спасибо за поддержку.'
+		},
+		{
+			name: 'Александр Смирнов',
+			image: '/review/person_4.jpg',
+			review:
+				'Эмпатичные сотрудники, готовые помочь в любое время суток. Сделали все возможное, чтобы облегчить бремя нашей утраты. Благодарим за помощь.'
+		}
+	])
+
 	return (
 		<>
-			{/* <Container> */}
 			<ReviewsContainer>
 				<h2>Отзывы о проведенных церемониях</h2>
 				<div className='slider-container'>
 					<Slider {...settings}>
-						{[...Array(4)].map((_, index) => (
+						{users.map((user, index) => (
-							<div>
+							<div key={index}>
 								<div className='item'>
-									<img src='/image 4.png' alt='' />
+									<img src={user.image} alt='' />
 									<div className='content'>
-										<h3>Виктор Иванов</h3>
+										<h3>{user.name}</h3>
-										<p>
+										<p>{user.review}</p>
-											Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-											sed do eiusmod tempor incididunt ut labore et dolore magna
-											aliqua.
-										</p>
 									</div>
 								</div>
 							</div>
@@ -222,7 +251,6 @@ export default function Review({}: Props) {
 					</Slider>
 				</div>
 			</ReviewsContainer>
-			{/* </Container> */}
 			<MobileReviewsContainer>
 				<h2>Отзывы о проведенных церемониях</h2>
 				<div className='slider-container'>

src/components/screens/home/blocks/SliderSection.tsx

@@ -1,12 +1,12 @@
 'use client'
 
 import { Container } from '@/app/GlobalStyles'
-import styled from 'styled-components'
+import LandingButton from '@/components/UI/button/LandingButton'
-import React from 'react'
+import { useState } from 'react'
 import Slider from 'react-slick'
 import 'slick-carousel/slick/slick-theme.css'
 import 'slick-carousel/slick/slick.css'
-import LandingButton from '@/components/UI/button/LandingButton'
+import styled from 'styled-components'
 
 const Item = styled.div`
 	position: relative;
@@ -33,10 +33,12 @@ const Item = styled.div`
 		box-sizing: border-box;
 
 		h3 {
+			text-align: start;
 			display: none;
 		}
 
 		h2 {
+			text-align: start;
 			margin-bottom: 20px;
 		}
 
@@ -166,7 +168,6 @@ const MobileSliderContainer = styled.div`
 type Props = {}
 
 export default function SliderSection({}: Props) {
-
 	const settings = {
 		infinite: true,
 		slidesToShow: 1,
@@ -186,23 +187,54 @@ export default function SliderSection({}: Props) {
 		]
 	}
 
+	const [slides, setSlides] = useState([
+		{
+			title: 'Мы принимаем заявки прямо сейчас',
+			content:
+				'Просто оставьте заявку, и мы свяжемся с вами для уточнения деталей и предоставления всей необходимой информации.',
+			image: '/home_slider/slide_4.jpg',
+			link: '',
+			button: 'Оставить заявку'
+		},
+		{
+			title: 'Мы предлагаем разнообразные услуги',
+			content:
+				'Широкий спектр услуг для достойного прощания и помощи в трудный момент. У нас вы найдете все необходимое для организации похоронных церемоний.',
+			image: '/home_slider/slide_1.jpg',
+			link: '',
+			button: 'Узнать больше'
+		},
+		{
+			title: 'Мы работаем со всеми кладбищами в области',
+			content:
+				'Наши услуги доступны на всех кладбищах в этой области для вашего удобства. Мы готовы помочь вам в любом месте и в любое время.',
+			image: '/home_slider/slide_2.png',
+			link: '',
+			button: 'Смотреть кладбища'
+		},
+		{
+			title: 'Мы работаем давно и многое можем предложить',
+			content:
+				'Наша команда специалистов - залог профессионализма и заботы. Мы основываемся на принципах честности, сочувствия и уважения.',
+			image: '/home_slider/slide_3.jpg',
+			link: '',
+			button: 'Подробнее о нас'
+		}
+	])
+
 	return (
 		<>
 			<Container>
 				<SliderContainer>
 					<Slider {...settings}>
-						{[...Array(2)].map((_, index) => (
+						{slides.map((item, index) => (
-							<Item>
+							<Item key={index}>
-								<img src='/image 1.png' alt='' />
+								<img src={item.image} alt='' />
 								<div className='content'>
-									<h2>Предоставление похоронных услуг в Челябинске.</h2>
+									<h2>{item.title}</h2>
-									<h3>Предоставление похоронных услуг в Челябинске.</h3>
+									<h3>{item.title}</h3>
-									<h4>
+									<h4>{item.content}</h4>
-										Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+									<LandingButton>{item.button}</LandingButton>
-										do eiusmod tempor incididunt ut labore et dolore magna
-										aliqua.
-									</h4>
-									<LandingButton>Подробнее о нас</LandingButton>
 								</div>
 							</Item>
 						))}

src/lib/StyledComponentsRegistry.tsx

@@ -9,8 +9,6 @@ export default function StyledComponentsRegistry({
 }: {
 	children: React.ReactNode
 }) {
-	// Only create stylesheet once with lazy initial state
-	// x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
 	const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
 
 	useServerInsertedHTML(() => {