pre fix commit
After Width: | Height: | Size: 257 KiB |
Before Width: | Height: | Size: 966 KiB After Width: | Height: | Size: 966 KiB |
After Width: | Height: | Size: 62 KiB |
After Width: | Height: | Size: 62 KiB |
Before Width: | Height: | Size: 208 KiB |
BIN
public/image.png
Before Width: | Height: | Size: 966 KiB |
After Width: | Height: | Size: 144 KiB |
After Width: | Height: | Size: 457 KiB |
After Width: | Height: | Size: 373 KiB |
After Width: | Height: | Size: 801 KiB |
|
@ -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) => (
|
||||
<div>
|
||||
{users.map((user, index) => (
|
||||
<div key={index}>
|
||||
<div className='item'>
|
||||
<img src='/image 4.png' alt='' />
|
||||
<img src={user.image} alt='' />
|
||||
<div className='content'>
|
||||
<h3>Виктор Иванов</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua.
|
||||
</p>
|
||||
<h3>{user.name}</h3>
|
||||
<p>{user.review}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -222,7 +251,6 @@ export default function Review({}: Props) {
|
|||
</Slider>
|
||||
</div>
|
||||
</ReviewsContainer>
|
||||
{/* </Container> */}
|
||||
<MobileReviewsContainer>
|
||||
<h2>Отзывы о проведенных церемониях</h2>
|
||||
<div className='slider-container'>
|
||||
|
|
|
@ -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) {
|
|||
]
|
||||
}
|
||||
|
||||
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) => (
|
||||
<Item>
|
||||
<img src='/image 1.png' alt='' />
|
||||
{slides.map((item, index) => (
|
||||
<Item key={index}>
|
||||
<img src={item.image} alt='' />
|
||||
<div className='content'>
|
||||
<h2>Предоставление похоронных услуг в Челябинске.</h2>
|
||||
<h3>Предоставление похоронных услуг в Челябинске.</h3>
|
||||
<h4>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
|
||||
do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua.
|
||||
</h4>
|
||||
<LandingButton>Подробнее о нас</LandingButton>
|
||||
<h2>{item.title}</h2>
|
||||
<h3>{item.title}</h3>
|
||||
<h4>{item.content}</h4>
|
||||
<LandingButton>{item.button}</LandingButton>
|
||||
</div>
|
||||
</Item>
|
||||
))}
|
||||
|
|
|
@ -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(() => {
|
||||
|
|