lootboxer/excursions
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Добавил нормальный лоадер
All checks were successful
/ build (push) Successful in 1m27s
Details
/ deploy (push) Successful in 10s
Details

Browse source
This commit is contained in:
lootboxer 2025-07-02 14:04:32 +03:00
parent 3c840cf2d0
commit c46adbf0e1
16 changed files with 154 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/App.module.scss
View file

@ -1,3 +1,4 @@
.app { .app {
height: 100%; height: 100%;
width: 100%;
} }

4
src/assets/styles/main.scss
View file

@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
#root {
width: 100%;
}
html { html {
background-color: var(--background-color); background-color: var(--background-color);
font-color: var(--text-color); font-color: var(--text-color);

11
src/components/home/ExcursionCard.module.scss
View file

@ -15,7 +15,7 @@
.cardImageWrapper { .cardImageWrapper {
overflow: hidden; overflow: hidden;
height: 240px; height: 20em;
width: 100%; width: 100%;
} }
@ -23,3 +23,12 @@
height: 100%; height: 100%;
width: auto; width: auto;
} }
.description {
display: -webkit-box;
line-clamp: 3;
-webkit-line-clamp: 3;
/* количество строк */
-webkit-box-orient: vertical;
overflow: hidden;
}

10
src/components/home/ExcursionCard.tsx
View file

@ -17,11 +17,11 @@ export default function ExcursionCard({ title, description, imageUrl, city, minP
return <div className={styles.card} ref={ref}> return <div className={styles.card} ref={ref}>
<div className={styles.cardImageWrapper}><img src={imageUrl} alt={title} className={styles.cardImage} /></div> <div className={styles.cardImageWrapper}><img src={imageUrl} alt={title} className={styles.cardImage} /></div>
<h3>{title}</h3> <h3 className={styles.title}>{title}</h3>
<p>город: {city}</p> <span className={styles.city}>город: {city}</span>
<p>стоимость: {cost}</p> <span className={styles.cost}>стоимость: {cost}</span>
<p>{description}</p> <span className={styles.description}>{description}</span>
<p>Человек: от {minPeople} до {maxPeople}</p> <span className={styles.people}>Человек: от {minPeople} до {maxPeople}</span>
<Button onClick={() => console.log(`Booking ${title}`)} >Подробнее</Button> <Button onClick={() => console.log(`Booking ${title}`)} >Подробнее</Button>
</div> </div>
}; };

1
src/components/home/Filters.module.scss
View file

@ -6,5 +6,6 @@
.filters { .filters {
display: flex; display: flex;
align-items: end;
gap: 24px; gap: 24px;
} }

4
src/components/home/Filters.tsx
View file

@ -25,9 +25,9 @@ export default function Filters({ onChangeFilter }: IFiltersProps) {
> >
<div className={styles.filters}> <div className={styles.filters}>
<Input placeholder={'Москва'} label={"Город"} value={filter.city} onChange={(e) => setFilter({ ...filter, city: e.target.value })} /> <Input placeholder={'Москва'} label={"Город"} value={filter.city} onChange={(e) => setFilter({ ...filter, city: e.target.value })} />
<NumberRangeInput label='Цена' minLimit={0} maxLimit={99999} onChange={handleRangeChange} /> <NumberRangeInput label='Цена' minLimit={0} maxLimit={10000} onChange={handleRangeChange} />
<Input mask={/^\d{0,2}$/} label={'Кол-во человек'} value={`${filter.countPeople}`} onChange={(e) => +e.target.value} placeholder='10' /> <Input mask={/^\d{0,2}$/} label={'Кол-во человек'} value={`${filter.countPeople}`} onChange={(e) => +e.target.value} placeholder='10' />
<Button onClick={() => onChangeFilter(filter)}>Отфильтровать</Button>
</div> </div>
<Button onClick={() => onChangeFilter(filter)}>Отфильтровать</Button>
</div> </div>
} }

15
src/components/home/Listing.module.scss
View file

@ -1,3 +1,11 @@
.gridContainer {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
}
.excursionsGrid { .excursionsGrid {
height: fit-content; height: fit-content;
width: 100%; width: 100%;
@ -7,7 +15,8 @@
justify-content: space-evenly; justify-content: space-evenly;
} }
.loader { @media(max-width:768px) {
background-color: red; .excursionsGrid {
height: 30px; grid-template-columns: 1fr
}
} }

39
src/components/home/Listing.tsx
View file

@ -4,6 +4,7 @@ import type { IExcursionCard } from '@/types';
import { useEffect, useRef, useState, useCallback } from 'react'; import { useEffect, useRef, useState, useCallback } from 'react';
import type { IExcursionsFilter } from '@/types'; import type { IExcursionsFilter } from '@/types';
import ApiService from '@/services/apiService'; import ApiService from '@/services/apiService';
import Loader from '@/components/ui/Loader/Loader';
const LIMIT = 3; const LIMIT = 3;
@ -71,22 +72,28 @@ const Listing = (props: IListingProps) => {
}, [excursions]) }, [excursions])
return ( return (
<div > <>
<div className={styles.excursionsGrid}> {!!excursions.length &&
{ <div className={styles.gridContainer}>
excursions.map((excursion, index) => ( <div className={styles.excursionsGrid}>
<ExcursionCard {
{...excursion} excursions.map((excursion, index) => (
key={index} <ExcursionCard
ref={(el) => setCardRef(el, index)} {...excursion}
minPeople={excursion.minCountPeople} key={index}
maxPeople={excursion.maxCountPeople} ref={(el) => setCardRef(el, index)}
/> minPeople={excursion.minCountPeople}
)) maxPeople={excursion.maxCountPeople}
} />
</div > ))
<div>{isLoading ? 'loading...' : ''}</div> }
</div> </div >
</div>
}
{
isLoading && <Loader />
}
</>
); );
} }

6
src/components/ui/Button/Button.module.scss
View file

@ -1,4 +1,6 @@
.buttonContainer {} .buttonContainer {
height: fit-content;
}
.buttonOutlineContainer { .buttonOutlineContainer {
background-color: var(--background-color); background-color: var(--background-color);
@ -17,6 +19,8 @@
cursor: pointer; cursor: pointer;
gap: 8px; gap: 8px;
width: fit-content; width: fit-content;
height: fit-content;
justify-content: center;
&:hover { &:hover {
background-color: grey; background-color: grey;

2
src/components/ui/Button/Button.tsx
View file

@ -13,7 +13,7 @@ interface ButtonProps {
export default function Button({ children, onClick, onKeyUp, iconAfter, outline, className }: ButtonProps) { export default function Button({ children, onClick, onKeyUp, iconAfter, outline, className }: ButtonProps) {
return ( return (
<button className={`${outline && styles.buttonOutlineContainer} ${styles.sort} ${styles.button}`} onClick={onClick} onKeyUp={onKeyUp}> <button className={`${outline && styles.buttonOutlineContainer} ${styles.button}`} onClick={onClick} onKeyUp={onKeyUp}>
{children} {children}
{ {
iconAfter && <div className={styles.iconAfter}> iconAfter && <div className={styles.iconAfter}>

27
src/components/ui/Loader/Loader.module.scss Normal file
View file

@ -0,0 +1,27 @@
.loader-container {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
min-height: 60px;
height: fit-content;
}
.loader {
width: 50%;
height: 50%;
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

11
src/components/ui/Loader/Loader.tsx Normal file
View file

@ -0,0 +1,11 @@
import styles from './Loader.module.scss';
function Loader() {
return (
<div className={styles['loader-container']}>
<div className={styles.loader} />
</div>
);
}
export default Loader;

4
src/components/ui/NumberRageInput/NumberRageInput.tsx
View file

@ -55,6 +55,8 @@ function NumberRangeInput({
<label className={styles.label}>От:</label> <label className={styles.label}>От:</label>
<IMaskInput <IMaskInput
mask={Number} mask={Number}
min={minLimit}
max={maxLimit}
name="min" name="min"
value={`${range.min}`} value={`${range.min}`}
onChange={handleChange} onChange={handleChange}
@ -68,6 +70,8 @@ function NumberRangeInput({
mask={Number} mask={Number}
name="max" name="max"
value={`${range.max}`} value={`${range.max}`}
min={minLimit}
max={maxLimit}
onChange={handleChange} onChange={handleChange}
placeholder={`${maxLimit}`} placeholder={`${maxLimit}`}
className={styles.input} className={styles.input}

50
src/constants/index.ts
View file

@ -3,7 +3,7 @@ import type { IExcursionCard } from "@/types";
export const excursions: IExcursionCard[] = [ export const excursions: IExcursionCard[] = [
{ {
"title": "Горное приключение", "title": "Горное приключение",
"description": "Исследуйте захватывающие горные хребты с нашими гидами. Это идеальный тур для тех, кто ищет уникальные впечатления и незабываемые пейзажи. Вы откроете для себя красоту и величие этого места.", "description": "Исследуйте захватывающие горные хребты с нашими гидами. Это идеальный тур для тех, кто ищет уникальные впечатления и незабываемые пейзажи. Вы откроете для себя красоту и величие этого места.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
"city": "Аспен", "city": "Аспен",
"cost": 200, "cost": 200,
@ -12,7 +12,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Пляжный отдых", "title": "Пляжный отдых",
"description": "Расслабьтесь на чистейших пляжах с прозрачной водой. Это идеальный тур для тех, кто ищет уникальные впечатления и незабываемые пейзажи. Вы откроете для себя красоту и величие этого места.", "description": "Расслабьтесь на чистейших пляжах с прозрачной водой. Это идеальный тур для тех, кто ищет уникальные впечатления и незабываемые пейзажи. Вы откроете для себя красоту и величие этого места.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80", "imageUrl": "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80",
"city": "Мальдивы", "city": "Мальдивы",
"cost": 500, "cost": 500,
@ -21,7 +21,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Городской тур", "title": "Городской тур",
"description": "Откройте для себя богатую историю и культуру города. Это идеальный тур для тех, кто ищет уникальные впечатления и незабываемые пейзажи. Вы откроете для себя красоту и величие этого места.", "description": "Откройте для себя богатую историю и культуру города. Это идеальный тур для тех, кто ищет уникальные впечатления и незабываемые пейзажи. Вы откроете для себя красоту и величие этого места.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1485872299829-c673f5194813?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1458&q=80", "imageUrl": "https://images.unsplash.com/photo-1485872299829-c673f5194813?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1458&q=80",
"city": "Париж", "city": "Париж",
"cost": 150, "cost": 150,
@ -30,7 +30,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Экспедиция в джунгли", "title": "Экспедиция в джунгли",
"description": "Отправляйтесь в дикую природу с нашими опытными проводниками. Это идеальный тур для тех, кто ищет уникальные впечатления и незабываемые пейзажи. Вы откроете для себя красоту и величие этого места.", "description": "Отправляйтесь в дикую природу с нашими опытными проводниками. Это идеальный тур для тех, кто ищет уникальные впечатления и незабываемые пейзажи. Вы откроете для себя красоту и величие этого места.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1452421822248-d4c2b47f0c81?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1452421822248-d4c2b47f0c81?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
"city": "Амазон", "city": "Амазон",
"cost": 300, "cost": 300,
@ -39,7 +39,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Пустынное сафари", "title": "Пустынное сафари",
"description": "Ощутите азарт катания по дюнам и прогулок на верблюдах. Это идеальный тур для тех, кто ищет уникальные впечатления и незабываемые пейзажи. Вы откроете для себя красоту и величие этого места.", "description": "Ощутите азарт катания по дюнам и прогулок на верблюдах. Это идеальный тур для тех, кто ищет уникальные впечатления и незабываемые пейзажи. Вы откроете для себя красоту и величие этого места.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1509316785289-025f5b846b35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1476&q=80", "imageUrl": "https://images.unsplash.com/photo-1509316785289-025f5b846b35?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1476&q=80",
"city": "Дубаи", "city": "Дубаи",
"cost": 250, "cost": 250,
@ -48,7 +48,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Тур по замкам Баварии", "title": "Тур по замкам Баварии",
"description": "Погрузитесь в сказочную атмосферу средневековых замков Баварии. Это идеальный тур для ценителей архитектуры, истории и захватывающих пейзажей. Вас ждут незабываемые моменты и отличные фото!", "description": "Погрузитесь в сказочную атмосферу средневековых замков Баварии. Это идеальный тур для ценителей архитектуры, истории и захватывающих пейзажей. Вас ждут незабываемые моменты и отличные фото!Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1565701302544-25357dec7d83?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1565701302544-25357dec7d83?auto=format&fit=crop&w=1470&q=80",
"city": "Мюнхен", "city": "Мюнхен",
"cost": 270, "cost": 270,
@ -57,7 +57,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Плавание на каяках по фьордам", "title": "Плавание на каяках по фьордам",
"description": "Откройте для себя величие норвежских фьордов, катаясь на каяке в окружении гор и водопадов. Это идеальный способ сбежать от суеты и насладиться природой в полной тишине и спокойствии.", "description": "Откройте для себя величие норвежских фьордов, катаясь на каяке в окружении гор и водопадов. Это идеальный способ сбежать от суеты и насладиться природой в полной тишине и спокойствии.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1519817650390-64a93db511aa?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1519817650390-64a93db511aa?auto=format&fit=crop&w=1470&q=80",
"city": "Гейрангер", "city": "Гейрангер",
"cost": 320, "cost": 320,
@ -66,7 +66,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Фестиваль фонарей в Таиланде", "title": "Фестиваль фонарей в Таиланде",
"description": "Испытайте магию фестиваля фонарей в Чиангмае, где небо озаряется тысячами огней. Это культурное событие дарит глубокие эмоции, красивые традиции и уникальные фото на память.", "description": "Испытайте магию фестиваля фонарей в Чиангмае, где небо озаряется тысячами огней. Это культурное событие дарит глубокие эмоции, красивые традиции и уникальные фото на память.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1573485809116-5541efcb6cbd?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1573485809116-5541efcb6cbd?auto=format&fit=crop&w=1470&q=80",
"city": "Чиангмай", "city": "Чиангмай",
"cost": 210, "cost": 210,
@ -75,7 +75,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Поездка по винодельням Тосканы", "title": "Поездка по винодельням Тосканы",
"description": "Насладитесь ароматами и вкусами лучших тосканских вин на фоне живописных холмов. Вы познакомитесь с виноделами, отдохнете на природе и узнаете много интересного о культуре региона.", "description": "Насладитесь ароматами и вкусами лучших тосканских вин на фоне живописных холмов. Вы познакомитесь с виноделами, отдохнете на природе и узнаете много интересного о культуре региона.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1587733326949-10608aa03a4a?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1587733326949-10608aa03a4a?auto=format&fit=crop&w=1470&q=80",
"city": "Флоренция", "city": "Флоренция",
"cost": 290, "cost": 290,
@ -84,7 +84,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Полёт на параплане над Альпами", "title": "Полёт на параплане над Альпами",
"description": "Ощутите свободу полёта над заснеженными вершинами Альп! Вас ждёт адреналин, невероятные виды и полное единение с природой. Безопасно, захватывающе и абсолютно незабываемо.", "description": "Ощутите свободу полёта над заснеженными вершинами Альп! Вас ждёт адреналин, невероятные виды и полное единение с природой. Безопасно, захватывающе и абсолютно незабываемо.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1580826889740-906f6f2bfa6f?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1580826889740-906f6f2bfa6f?auto=format&fit=crop&w=1470&q=80",
"city": "Инсбрук", "city": "Инсбрук",
"cost": 350, "cost": 350,
@ -93,7 +93,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Охота за трюфелями", "title": "Охота за трюфелями",
"description": "Отправьтесь в леса Пьемонта вместе с опытным проводником и обученной собакой, чтобы найти ценные трюфели. В завершение — дегустация блюд с трюфелями и вином.", "description": "Отправьтесь в леса Пьемонта вместе с опытным проводником и обученной собакой, чтобы найти ценные трюфели. В завершение — дегустация блюд с трюфелями и вином.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1609851653162-e79e9a4b09b7?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1609851653162-e79e9a4b09b7?auto=format&fit=crop&w=1470&q=80",
"city": "Альба", "city": "Альба",
"cost": 240, "cost": 240,
@ -102,7 +102,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Тур по каналам Венеции", "title": "Тур по каналам Венеции",
"description": "Откройте для себя Венецию с воды: гондолы, узкие каналы и старинные мосты. Это романтическое и атмосферное путешествие по одному из самых красивых городов мира.", "description": "Откройте для себя Венецию с воды: гондолы, узкие каналы и старинные мосты. Это романтическое и атмосферное путешествие по одному из самых красивых городов мира.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1505765050516-f72dcac9c60b?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1505765050516-f72dcac9c60b?auto=format&fit=crop&w=1470&q=80",
"city": "Венеция", "city": "Венеция",
"cost": 200, "cost": 200,
@ -111,7 +111,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Лаванда Прованса", "title": "Лаванда Прованса",
"description": "Посетите бескрайние лавандовые поля Прованса в период цветения. Тур включает фотосессию, дегустацию местных продуктов и экскурсию по деревням региона.", "description": "Посетите бескрайние лавандовые поля Прованса в период цветения. Тур включает фотосессию, дегустацию местных продуктов и экскурсию по деревням региона.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1508609349937-5ec4ae374ebf?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1508609349937-5ec4ae374ebf?auto=format&fit=crop&w=1470&q=80",
"city": "Валансоль", "city": "Валансоль",
"cost": 280, "cost": 280,
@ -120,7 +120,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Тропами майя", "title": "Тропами майя",
"description": "Исследуйте древние руины цивилизации майя в джунглях Юкатана. Вы услышите истории, легенды и увидите пирамиды, сохранившие дух тысячелетий.", "description": "Исследуйте древние руины цивилизации майя в джунглях Юкатана. Вы услышите истории, легенды и увидите пирамиды, сохранившие дух тысячелетий.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1580062212579-d8f1080ef22e?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1580062212579-d8f1080ef22e?auto=format&fit=crop&w=1470&q=80",
"city": "Чичен-Ица", "city": "Чичен-Ица",
"cost": 260, "cost": 260,
@ -129,7 +129,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Ночь в пустыне", "title": "Ночь в пустыне",
"description": "Переночуйте под звёздным небом в марокканской пустыне. Вас ждут закат на дюнах, ужин у костра, традиционная музыка и удивительная тишина вокруг.", "description": "Переночуйте под звёздным небом в марокканской пустыне. Вас ждут закат на дюнах, ужин у костра, традиционная музыка и удивительная тишина вокруг.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1470&q=80",
"city": "Мерзуга", "city": "Мерзуга",
"cost": 310, "cost": 310,
@ -138,7 +138,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Сафари на снегоходах", "title": "Сафари на снегоходах",
"description": "Промчитесь по заснеженным просторам Лапландии на снегоходах. Тур подходит для любителей скорости и северной природы. Теплая экипировка включена.", "description": "Промчитесь по заснеженным просторам Лапландии на снегоходах. Тур подходит для любителей скорости и северной природы. Теплая экипировка включена.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1600611447463-6e85a8b394b3?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1600611447463-6e85a8b394b3?auto=format&fit=crop&w=1470&q=80",
"city": "Рованиеми", "city": "Рованиеми",
"cost": 330, "cost": 330,
@ -147,7 +147,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Тур по музеям Ватикана", "title": "Тур по музеям Ватикана",
"description": "Откройте величие искусства и истории в музеях Ватикана. Сикстинская капелла, античные залы и коллекции, которыми восхищается весь мир.", "description": "Откройте величие искусства и истории в музеях Ватикана. Сикстинская капелла, античные залы и коллекции, которыми восхищается весь мир.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1549880181-56a44cf4a9a4?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1549880181-56a44cf4a9a4?auto=format&fit=crop&w=1470&q=80",
"city": "Ватикан", "city": "Ватикан",
"cost": 190, "cost": 190,
@ -156,7 +156,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Круиз по Нилу", "title": "Круиз по Нилу",
"description": "Путешествие по Нилу с остановками у древних храмов и памятников. Наслаждайтесь видом пустыни, зелёных берегов и бескрайней реки Египта.", "description": "Путешествие по Нилу с остановками у древних храмов и памятников. Наслаждайтесь видом пустыни, зелёных берегов и бескрайней реки Египта.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1596462502278-c6efc27516d2?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1596462502278-c6efc27516d2?auto=format&fit=crop&w=1470&q=80",
"city": "Луксор", "city": "Луксор",
"cost": 370, "cost": 370,
@ -165,7 +165,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Поездка по храмам Киото", "title": "Поездка по храмам Киото",
"description": "Ощутите дух древней Японии, посетив знаменитые храмы Киото, прогуливаясь по бамбуковым рощам и чайным садам. Это культурное и медитативное путешествие.", "description": "Ощутите дух древней Японии, посетив знаменитые храмы Киото, прогуливаясь по бамбуковым рощам и чайным садам. Это культурное и медитативное путешествие.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1526481280690-46998b3087d4?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1526481280690-46998b3087d4?auto=format&fit=crop&w=1470&q=80",
"city": "Киото", "city": "Киото",
"cost": 300, "cost": 300,
@ -174,7 +174,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Ночная фотопрогулка по Токио", "title": "Ночная фотопрогулка по Токио",
"description": "Прогуляйтесь по сияющим улицам Токио в сопровождении фотографа. Неоновый свет, городская архитектура и жизнь мегаполиса оживают в кадре.", "description": "Прогуляйтесь по сияющим улицам Токио в сопровождении фотографа. Неоновый свет, городская архитектура и жизнь мегаполиса оживают в кадре.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1549692520-acc6669e2f0c?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1549692520-acc6669e2f0c?auto=format&fit=crop&w=1470&q=80",
"city": "Токио", "city": "Токио",
"cost": 230, "cost": 230,
@ -183,7 +183,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Пеший маршрут по Исландии", "title": "Пеший маршрут по Исландии",
"description": "Пройдите по живописным тропам Исландии — гейзеры, водопады, лавовые поля и ледники. Маршрут для активных путешественников, готовых к открытию нового.", "description": "Пройдите по живописным тропам Исландии — гейзеры, водопады, лавовые поля и ледники. Маршрут для активных путешественников, готовых к открытию нового.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1533907650686-70576141c030?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1533907650686-70576141c030?auto=format&fit=crop&w=1470&q=80",
"city": "Рейкьявик", "city": "Рейкьявик",
"cost": 350, "cost": 350,
@ -192,7 +192,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Тур по Гарни и Гегарду", "title": "Тур по Гарни и Гегарду",
"description": "Историческое путешествие по храму Гарни и монастырю Гегард — архитектурным жемчужинам Армении. Вас ждут горные виды и древняя культура.", "description": "Историческое путешествие по храму Гарни и монастырю Гегард — архитектурным жемчужинам Армении. Вас ждут горные виды и древняя культура.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1595252071623-60be9e0348cb?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1595252071623-60be9e0348cb?auto=format&fit=crop&w=1470&q=80",
"city": "Ереван", "city": "Ереван",
"cost": 150, "cost": 150,
@ -201,7 +201,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Арктическая рыбалка", "title": "Арктическая рыбалка",
"description": "Поймайте треску или лосося в арктических водах. Программа включает обучение, снаряжение и горячий обед у костра после приключения на льду.", "description": "Поймайте треску или лосося в арктических водах. Программа включает обучение, снаряжение и горячий обед у костра после приключения на льду.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1504711434969-e33886168f5c?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1504711434969-e33886168f5c?auto=format&fit=crop&w=1470&q=80",
"city": "Норвегия", "city": "Норвегия",
"cost": 270, "cost": 270,
@ -210,7 +210,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Золотой треугольник Индии", "title": "Золотой треугольник Индии",
"description": "Посетите Дели, Агру и Джайпур — три города, отражающих величие индийской истории, архитектуры и культуры. В программе Тадж-Махал, форт Амбер и многое другое.", "description": "Посетите Дели, Агру и Джайпур — три города, отражающих величие индийской истории, архитектуры и культуры. В программе Тадж-Махал, форт Амбер и многое другое.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1585241936936-6f19d9b32b0d?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1585241936936-6f19d9b32b0d?auto=format&fit=crop&w=1470&q=80",
"city": "Дели", "city": "Дели",
"cost": 390, "cost": 390,
@ -219,7 +219,7 @@ export const excursions: IExcursionCard[] = [
}, },
{ {
"title": "Фото-тур по Сахаре", "title": "Фото-тур по Сахаре",
"description": "Сделайте потрясающие снимки дюн, караванов и заката в сердце Сахары. Подходит как для начинающих, так и для профессионалов, желающих поймать свет пустыни.", "description": "Сделайте потрясающие снимки дюн, караванов и заката в сердце Сахары. Подходит как для начинающих, так и для профессионалов, желающих поймать свет пустыни.Lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque sem placerat in id cursus mi pretium tellus duis convallis tempus leo eu aenean sed diam urna tempor pulvinar vivamus fringilla lacus nec metus bibendum egestas iaculis massa nisl malesuada lacinia integer nunc posuere ut hendrerit semper vel class aptent taciti sociosqu ad litora torquent per conubia nostra inceptos himenaeos orci varius natoque penatibus et magnis dis parturient montes nascetur ridiculus mus donec rhoncus eros lobortis nulla molestie mattis scelerisque maximus eget fermentum odio phasellus non purus est efficitur laoreet mauris pharetra vestibulum fusce dictum risus blandit quis suspendisse aliquet nisi sodales consequat magna ante condimentum neque at luctus nibh finibus facilisis dapibus etiam interdum tortor ligula congue sollicitudin erat viverra ac tincidunt nam porta elementum a enim euismod quam justo lectus commodo augue arcu dignissim velit aliquam imperdiet mollis nullam volutpat porttitor ullamcorper rutrum gravida cras eleifend turpis fames primis vulputate ornare sagittis vehicula praesent dui felis venenatis ultrices proin libero feugiat tristique accumsan maecenas potenti ultricies habitant morbi senectus netus suscipit auctor curabitur facilisi cubilia curae hac habitasse platea dictumst lorem ipsum dolor sit amet consectetur adipiscing elit quisque faucibus ex sapien vitae pellentesque.",
"imageUrl": "https://images.unsplash.com/photo-1565373798780-e38dc2526e26?auto=format&fit=crop&w=1470&q=80", "imageUrl": "https://images.unsplash.com/photo-1565373798780-e38dc2526e26?auto=format&fit=crop&w=1470&q=80",
"city": "Сахара", "city": "Сахара",
"cost": 310, "cost": 310,

7
src/pages/Home.module.scss
View file

@ -3,9 +3,16 @@
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
height: 100%; height: 100%;
width: 100%;
padding: 24px; padding: 24px;
align-items: center;
} }
.header { .header {
text-align: center; text-align: center;
} }
.sort {
display: flex;
gap: 24px;
}

27
src/pages/Home.tsx
View file

@ -17,17 +17,22 @@ export default function Home() {
<h1>Экскурсии</h1> <h1>Экскурсии</h1>
</header> </header>
<Filters onChangeFilter={changeFiltersHandle} /> <Filters onChangeFilter={changeFiltersHandle} />
<Button
className={styles.sort} <div className={styles.sort}>
onClick={() => (setIsPriceSortOrderAsc((old) => !old))} Сортировка:
iconAfter={ <Button
<div className={styles.sortIcon} onClick={() => (setIsPriceSortOrderAsc((old) => !old))}
style={!isPriceSortOrderAsc ? { iconAfter={
transform: 'rotate(180deg)', <div className={styles.sortIcon}
} : {}}> style={!isPriceSortOrderAsc ? {
\/ transform: 'rotate(180deg)',
</div> } : {}}>
}>По цене</Button> ↓
</div>
}>
По цене
</Button>
</div>
<Listing filter={filter} isPriceSortAsc={isPriceSortOrderAsc} /> <Listing filter={filter} isPriceSortAsc={isPriceSortOrderAsc} />
</div > </div >