diff --git a/package-lock.json b/package-lock.json index e8622d7..791fa88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@radix-ui/react-slot": "^1.2.3", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "embla-carousel-react": "^8.6.0", "lucide-react": "^0.546.0", "next": "15.5.5", "react": "19.1.0", @@ -2893,6 +2894,34 @@ "node": ">= 0.4" } }, + "node_modules/embla-carousel": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz", + "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==", + "license": "MIT" + }, + "node_modules/embla-carousel-react": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz", + "integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==", + "license": "MIT", + "dependencies": { + "embla-carousel": "8.6.0", + "embla-carousel-reactive-utils": "8.6.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" + } + }, + "node_modules/embla-carousel-reactive-utils": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz", + "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==", + "license": "MIT", + "peerDependencies": { + "embla-carousel": "8.6.0" + } + }, "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", diff --git a/package.json b/package.json index aa1ca41..d512e4f 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@radix-ui/react-slot": "^1.2.3", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "embla-carousel-react": "^8.6.0", "lucide-react": "^0.546.0", "next": "15.5.5", "react": "19.1.0", diff --git a/public/images/heart.png b/public/images/heart.png new file mode 100644 index 0000000..29fc8b3 Binary files /dev/null and b/public/images/heart.png differ diff --git a/public/images/rod.png b/public/images/rod.png new file mode 100644 index 0000000..32c0d6e Binary files /dev/null and b/public/images/rod.png differ diff --git a/public/images/yacht.jpg b/public/images/yacht.jpg new file mode 100644 index 0000000..182cfff Binary files /dev/null and b/public/images/yacht.jpg differ diff --git a/src/app/components/Advantages.tsx b/src/app/components/Advantages.tsx index 5a4ebf9..499991c 100644 --- a/src/app/components/Advantages.tsx +++ b/src/app/components/Advantages.tsx @@ -1,27 +1,140 @@ import Image from "next/image"; -import { Button } from "@/components/ui/button"; export default function Advantages() { return ( -
-
-

- Аренда яхт и поругов в Балканах +
+ {/* Заголовок секции */} +
+

+ Аренда яхт и организация морских прогулок в Балаклаве

-
    -
  1. Каждый пункт из макета...
    2. - {/* Добавьте 3-4 пункта */} -
- +

+ Выбирайте яхту и наслаждайтесь, об остальном позаботились мы +

-
- Яхта + +
+ {/* Левая колонка с тремя секциями */} +
+ {/* Секция 01 */} +
+
+ 01 +
+

+ Каталог лучших яхт Балаклавы в разных ценовых сегментах +

+

+ Проверенные лодки с лицензией на перевозки, надежные судовладельцы, опытные капитаны. + В нашем каталоге вы найдете катера, парусники, катамараны с фото, подробным описанием и диапазоном цен. +

+
+ + {/* Секция 02 */} +
+
+ 02 +
+

+ Удобное самостоятельное бронирование яхты в аренду +

+

+ Вы можете самостоятельно выбрать яхту на ваш вкус, взять любимую еду и напитки, поставить свой плей-лист. + На борту есть все для комфортного размещения. Выбирайте удобную дату, время и бронируйте. +

+
+ + {/* Секция 03 */} +
+
+ 03 +
+

+ Организация морских прогулок под ключ +

+

+ Вы можете связаться с нами, и наш менеджер поможет вам подобрать яхту, а также организовать праздник на борту: + шампанское и фрукты, кейтеринг по меню, музыканты и DJ, украшение яхты, прогулка в подарок. +

+
+
+ + {/* Правая колонка с изображением и оверлейными карточками */} +
+
+ Яхта в Балаклаве + + {/* Оверлейные карточки */} +
+
+ Яхта +
+

Яхта

+
+ {[...Array(5)].map((_, i) => ( + ★ + ))} +
+

124

+
+
+
+ +
+
+ Яхта +
+

Яхта

+
+ {[...Array(5)].map((_, i) => ( + ★ + ))} +
+

88

+
+
+
+ +
+
+ Яхта +
+

Яхта

+
+ {[...Array(5)].map((_, i) => ( + ★ + ))} +
+

88

+
+
+
+
+
); diff --git a/src/app/components/Articles.tsx b/src/app/components/Articles.tsx index 8c6b73c..91de9c7 100644 --- a/src/app/components/Articles.tsx +++ b/src/app/components/Articles.tsx @@ -1,24 +1,78 @@ -import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { Card, CardContent } from '@/components/ui/card' +import { Button } from '@/components/ui/button' import Image from 'next/image' const articles = [ - { title: 'Тема 1', img: '/article1.jpg', desc: 'Краткое описание' }, - // 3 карточки + { + id: 1, + image: '/images/yacht.jpg', + tags: ['Полезное', 'Интересное'], + title: 'Тема публикации', + description: 'Текст публикации' + }, + { + id: 2, + image: '/images/yacht.jpg', + tags: ['Полезное', 'Интересное'], + title: 'В чем отличия яхты, катера и лодки?', + description: 'Гайд по выбору судна для морской прогулки. Что арендовать в Балаклаве', + hasButton: true + }, + { + id: 3, + image: '/images/yacht.jpg', + tags: [ + { text: 'Дзен', icon: 'D' }, + { text: 'VK', icon: 'VK' } + ], + title: 'Подпишись на наши группы в социальных сетях', + description: 'Чтобы не пропустить новый контент. Открой новое в мире морских прогулок' + } ] export default function Articles() { return (
-

Полезные статьи

+

Полезные статьи

- {articles.map((article, idx) => ( - - - {article.title} - - - {article.title} -

{article.desc}

+ {articles.map((article) => ( + +
+ {article.title} +
+ +
+ {article.tags.map((tag, idx) => ( + + {typeof tag === 'string' ? tag : tag.text} + + ))} +
+

+ {article.title} +

+

+ {article.description} +

+ {article.hasButton && ( +
+ +
+ )} ))} diff --git a/src/app/components/Hero.tsx b/src/app/components/Hero.tsx index 7f98fe9..1b829ba 100644 --- a/src/app/components/Hero.tsx +++ b/src/app/components/Hero.tsx @@ -1,4 +1,7 @@ import Image from "next/image"; +import { Card, CardContent } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { MapPin, Calendar, Users, Coins, Droplets, ChevronDown } from "lucide-react"; export default function Hero() { return ( @@ -10,29 +13,87 @@ export default function Hero() { className="object-cover" priority /> -
{" "} - {/* Оверлей для читаемости */} -
-

- Аренда яхт в Балканах -

-

Путешествуйте с Marine Travel

-
- {/* Поисковая форма: используйте shadcn input и button */} - - - +
+ +
+ {/* Заголовок и подзаголовок */} +
+

+ Аренда яхт +

+

+ в Балаклаве +

+

+ Подключись к морскому бризу вместе с Travel Marine +

+ + {/* Поисковая форма */} + + + {/* Основные поля поиска */} +
+ {/* Локация */} +
+ +
+ + {/* Дата и время */} +
+ +
+ + {/* Количество гостей */} +
+ +
+ + {/* Кнопка поиска */} + +
+ + {/* Фильтры */} +
+ + + + +
+ +
); diff --git a/src/app/components/Reviews.tsx b/src/app/components/Reviews.tsx new file mode 100644 index 0000000..9fb03d7 --- /dev/null +++ b/src/app/components/Reviews.tsx @@ -0,0 +1,64 @@ +import Image from "next/image"; + +const reviewCategories = [ + { + id: 1, + image: "/images/heart.png", + label: "Отзывы", + }, + { + id: 2, + image: "/images/heart.png", + label: "Свидание", + }, + { + id: 3, + image: "/images/heart.png", + label: "Закат", + }, + { + id: 4, + image: "/images/heart.png", + label: "С детьми", + }, + { + id: 5, + image: "/images/heart.png", + label: "Вечеринка", + }, + { + id: 6, + image: "/images/heart.png", + label: "Девичник", + }, +]; + +export default function Reviews() { + return ( +
+

+ Отзывы и истории аренд яхт +

+
+ {reviewCategories.map((category) => ( +
+
+ {category.label} +
+

+ {category.label} +

+
+ ))} +
+
+ ); +} diff --git a/src/app/components/Services.tsx b/src/app/components/Services.tsx index 61954e0..dd3aef1 100644 --- a/src/app/components/Services.tsx +++ b/src/app/components/Services.tsx @@ -1,17 +1,161 @@ -import Image from 'next/image' +"use client"; + +import Image from "next/image"; +import { Heart } from "lucide-react"; +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, +} from "@/components/ui/carousel"; +import { Card } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; export default function Services() { - return ( -
-
-

Морские прогулки

-

Описание преимуществ...

-
- Рыбалка - Парусники - {/* Добавьте больше по макету */} -
-
-
- ) -} \ No newline at end of file + return ( +
+
+
+

+ Морские прогулки +

+

+ Организация "под ключ" +

+

+ Мы поможем выбрать яхту под ваш запрос. Организуем + праздник на борту: шампанское и фрукты, кейтеринг по + меню, музыканты и DJ, украшение яхты, прогулка в + подарок. +

+
+ + {/* Два высоких карусели в одном ряду */} +
+ + + +
+ Морская рыбалка в Балаклаве +
+ +
+
+

+ Морская рыбалка в Балаклаве +

+
+
+ + + + + + + + + +
+ Прогулка на парусной яхте +
+ +
+
+

+ Прогулка на парусной яхте +

+
+
+ + + + + +
+ + {/* Три маленьких карточки на всю ширину */} +
+ +
+ Вечеринка на яхте +
+ +
+
+

+ Вечеринка на яхте +

+
+
+ + + +
+ Корпоративная прогулка на яхте +
+ +
+
+

+ Корпоративная прогулка на яхте +

+
+
+ + + +
+ Морские прогулки на яхте +
+ +
+
+

+ Морские прогулки на яхте в Бал... +

+
+
+ +
+ + {/* Кнопка */} +
+ +
+
+
+ ); +} diff --git a/src/app/components/VideoSection.tsx b/src/app/components/VideoSection.tsx index 256a362..f947d98 100644 --- a/src/app/components/VideoSection.tsx +++ b/src/app/components/VideoSection.tsx @@ -1,15 +1,42 @@ +import Image from 'next/image' + export default function VideoSection() { return ( -
-
-
-

Откройте мир морских прогулок

-

Описание...

+
+
+ {/* Левая колонка с текстом */} +
+

+ Откройте мир морских прогулок +

+

+ Романтическая прогулка, отдых с семьей, вечеринка с друзьями, спорт и развлечения, элитный отдых, девичник & морская фотосессия. +

-
- + + {/* Правая колонка с изображением */} +
+
+ Яхта SALVADOR на море + {/* Кнопка воспроизведения */} +
+ +
+
diff --git a/src/app/components/YachtGrid.tsx b/src/app/components/YachtGrid.tsx index 13a5ae1..b604cce 100644 --- a/src/app/components/YachtGrid.tsx +++ b/src/app/components/YachtGrid.tsx @@ -1,44 +1,193 @@ import { Card, CardContent, - CardFooter, CardHeader, - CardTitle, } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; import Image from "next/image"; const yachts = [ - { name: "Яхта 1", price: "от 12 000 ₽", img: "/yacht1.jpg" }, - // Добавьте ~9 элементов по макету + { + name: "Яхта", + length: "12 метров", + price: "от 12 500 Р / час", + feet: "+7 Футов", + img: "/images/yacht.jpg", + badge: "Быстрая бронь", + badgeIcon: "⚡" + }, + { + name: "Яхта", + length: "14 метров", + price: "от 26 400 Р / час", + feet: "+7 Футов", + img: "/images/yacht.jpg", + badge: "По запросу", + badgeIcon: "🔄" + }, + { + name: "Яхта", + length: "22 метра", + price: "от 48 000 Р / час", + feet: "+7 Футов", + img: "/images/yacht.jpg", + badge: "По запросу", + badgeIcon: "🔄" + }, + { + name: "Яхта", + length: "13.6 метров", + price: "от 17 400 Р / час", + feet: "+7 Футов", + img: "/images/yacht.jpg", + badge: "По запросу", + badgeIcon: "🔄" + }, + { + name: "Яхта", + length: "13 метров", + price: "от 14 400 Р / час", + feet: "+7 Футов", + img: "/images/yacht.jpg", + badge: "По запросу", + badgeIcon: "🔄" + }, + { + name: "Яхта", + length: "12 метров", + price: "от 12 480 Р / час", + feet: "+7 Футов", + img: "/images/yacht.jpg", + badge: "По запросу", + badgeIcon: "🔄" + }, + { + name: "Яхта", + length: "14 метров", + price: "от 18 000 Р / час", + feet: "+7 Футов", + img: "/images/yacht.jpg", + badge: "По запросу", + badgeIcon: "🔄" + }, + { + name: "Яхта", + length: "19 метров", + price: "от 25 920 Р / час", + feet: "+7 Футов", + img: "/images/yacht.jpg", + badge: "По запросу", + badgeIcon: "🔄" + }, + { + name: "Яхта", + length: "20 метров", + price: "от 32 400 Р / час", + feet: "+7 Футов", + img: "/images/yacht.jpg", + badge: "По запросу", + badgeIcon: "🔄" + }, + { + name: "Яхта", + length: "8 метров", + price: "от 9 960 Р / час", + feet: "+7 Футов", + img: "/images/yacht.jpg", + badge: "По запросу", + badgeIcon: "🔄" + }, + { + name: "Яхта", + length: "13 метров", + price: "от 18 000 Р / час", + feet: "+7 Футов", + img: "/images/yacht.jpg", + badge: "По запросу", + badgeIcon: "🔄" + }, + { + name: "Яхта", + length: "11.58 метров", + price: "от 14 400 Р / час", + feet: "+7 Футов", + img: "/images/yacht.jpg", + badge: "По запросу", + badgeIcon: "🔄" + }, ]; export default function YachtGrid() { return ( -
-

- Яхты в аренду -

-
- {yachts.map((yacht, idx) => ( - - - {yacht.name} - - - {yacht.name} - - -

{yacht.price}

- - - ))} +
+
+ {/* Header Section */} +
+

+ Яхты в аренду +

+

+ Онлайн бронирование яхт +

+

+ Каталог лучших яхт Балаклавы разных ценовых сегментах. Проверенные лодки с лицензией на перевозки, опытные капитаны. Выбирайте удобную дату, время и бронируйте. +

+
+ + {/* Yacht Grid */} +
+ {yachts.map((yacht, idx) => ( + + +
+ {yacht.name} + {/* Badge Overlay */} +
+
+ {yacht.badgeIcon} + {yacht.badge} +
+
+
+ + +
+

{yacht.name}

+
+

{yacht.price}

+
+
+
+
+ → + {yacht.length} +
+
+ ⚓ + {yacht.feet} +
+
+ + + ))} +
+ + {/* Call to Action Button */} +
+ +
-
+
); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 3d593c0..f6ee5e8 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -4,11 +4,13 @@ import Services from "@/app/components/Services"; import Advantages from "@/app/components/Advantages"; import VideoSection from "@/app/components/VideoSection"; import Articles from "@/app/components/Articles"; +import Reviews from "@/app/components/Reviews"; export default function Home() { return (
+ diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index 6e96b6b..ce7f6dc 100644 --- a/src/components/layout/Footer.tsx +++ b/src/components/layout/Footer.tsx @@ -1,12 +1,108 @@ +import Link from "next/link"; +import Image from "next/image"; + export default function Footer() { return ( -