diff --git a/public/home_slider/slide_1.jpg b/public/home_slider/slide_1.jpg new file mode 100644 index 0000000..b81deed Binary files /dev/null and b/public/home_slider/slide_1.jpg differ diff --git a/public/image 1.png b/public/home_slider/slide_2.png similarity index 100% rename from public/image 1.png rename to public/home_slider/slide_2.png diff --git a/public/home_slider/slide_3.jpg b/public/home_slider/slide_3.jpg new file mode 100644 index 0000000..0ddfe86 Binary files /dev/null and b/public/home_slider/slide_3.jpg differ diff --git a/public/home_slider/slide_4.jpg b/public/home_slider/slide_4.jpg new file mode 100644 index 0000000..c64da20 Binary files /dev/null and b/public/home_slider/slide_4.jpg differ diff --git a/public/image 7.png b/public/image 7.png deleted file mode 100644 index 14816a7..0000000 Binary files a/public/image 7.png and /dev/null differ diff --git a/public/image.png b/public/image.png deleted file mode 100644 index 52a1d9f..0000000 Binary files a/public/image.png and /dev/null differ diff --git a/public/review/person_1.jpg b/public/review/person_1.jpg new file mode 100644 index 0000000..2e41823 Binary files /dev/null and b/public/review/person_1.jpg differ diff --git a/public/review/person_2.jpg b/public/review/person_2.jpg new file mode 100644 index 0000000..e192087 Binary files /dev/null and b/public/review/person_2.jpg differ diff --git a/public/review/person_3.jpg b/public/review/person_3.jpg new file mode 100644 index 0000000..388d173 Binary files /dev/null and b/public/review/person_3.jpg differ diff --git a/public/review/person_4.jpg b/public/review/person_4.jpg new file mode 100644 index 0000000..5e28fa8 Binary files /dev/null and b/public/review/person_4.jpg differ diff --git a/src/components/screens/home/blocks/Review.tsx b/src/components/screens/home/blocks/Review.tsx index f930b2a..dfb0d4f 100644 --- a/src/components/screens/home/blocks/Review.tsx +++ b/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 ( <> - {/* */}

Отзывы о проведенных церемониях

- {[...Array(4)].map((_, index) => ( -
+ {users.map((user, index) => ( +
- +
-

Виктор Иванов

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. -

+

{user.name}

+

{user.review}

@@ -222,7 +251,6 @@ export default function Review({}: Props) {
- {/* */}

Отзывы о проведенных церемониях

diff --git a/src/components/screens/home/blocks/SliderSection.tsx b/src/components/screens/home/blocks/SliderSection.tsx index 2c8dcb9..75d11d1 100644 --- a/src/components/screens/home/blocks/SliderSection.tsx +++ b/src/components/screens/home/blocks/SliderSection.tsx @@ -1,12 +1,12 @@ 'use client' import { Container } from '@/app/GlobalStyles' -import styled from 'styled-components' -import React from 'react' +import LandingButton from '@/components/UI/button/LandingButton' +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) { ] } - return ( - <> - + 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 ( + <> + - {[...Array(2)].map((_, index) => ( - - + {slides.map((item, index) => ( + +
-

Предоставление похоронных услуг в Челябинске.

-

Предоставление похоронных услуг в Челябинске.

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed - do eiusmod tempor incididunt ut labore et dolore magna - aliqua. -

- Подробнее о нас +

{item.title}

+

{item.title}

+

{item.content}

+ {item.button}
))} @@ -227,6 +259,6 @@ export default function SliderSection({}: Props) { ))}
- - ) -} \ No newline at end of file + + ) +} diff --git a/src/lib/StyledComponentsRegistry.tsx b/src/lib/StyledComponentsRegistry.tsx index aed89fc..5a148c2 100644 --- a/src/lib/StyledComponentsRegistry.tsx +++ b/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(() => {