Генеративная доработка компонентов главной страницы
This commit is contained in:
parent
b80dad045c
commit
a31b68ec68
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 213 KiB |
|
|
@ -1,27 +1,140 @@
|
|||
import Image from "next/image";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function Advantages() {
|
||||
return (
|
||||
<section className="container mx-auto px-4 py-12 flex flex-col md:flex-row items-center">
|
||||
<div className="md:w-1/2 pr-8">
|
||||
<h2 className="text-3xl font-bold mb-6">
|
||||
Аренда яхт и поругов в Балканах
|
||||
<section className="container mx-auto px-4 py-16">
|
||||
{/* Заголовок секции */}
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl font-bold text-gray-800 mb-4">
|
||||
Аренда яхт и организация морских прогулок в Балаклаве
|
||||
</h2>
|
||||
<ol className="list-decimal space-y-4">
|
||||
<li>Каждый пункт из макета...</li>
|
||||
{/* Добавьте 3-4 пункта */}
|
||||
</ol>
|
||||
<Button className="mt-6 bg-primary">Выбрать яхту</Button>
|
||||
<p className="text-lg text-gray-600">
|
||||
Выбирайте яхту и наслаждайтесь, об остальном позаботились мы
|
||||
</p>
|
||||
</div>
|
||||
<div className="md:w-1/2 mt-8 md:mt-0">
|
||||
<Image
|
||||
src="/advantages-bg.jpg"
|
||||
alt="Яхта"
|
||||
width={600}
|
||||
height={400}
|
||||
className="rounded-lg"
|
||||
/>
|
||||
|
||||
<div className="flex flex-col lg:flex-row items-start gap-12">
|
||||
{/* Левая колонка с тремя секциями */}
|
||||
<div className="lg:w-1/2 space-y-8">
|
||||
{/* Секция 01 */}
|
||||
<div>
|
||||
<div className="w-12 h-8 border border-blue-200 rounded-lg flex items-center justify-center mb-4">
|
||||
<span className="text-blue-500 font-semibold text-lg">01</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-3 text-left">
|
||||
Каталог лучших яхт Балаклавы в разных ценовых сегментах
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed text-left">
|
||||
Проверенные лодки с лицензией на перевозки, надежные судовладельцы, опытные капитаны.
|
||||
В нашем каталоге вы найдете катера, парусники, катамараны с фото, подробным описанием и диапазоном цен.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Секция 02 */}
|
||||
<div>
|
||||
<div className="w-12 h-8 border border-blue-200 rounded-lg flex items-center justify-center mb-4">
|
||||
<span className="text-blue-500 font-semibold text-lg">02</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-3 text-left">
|
||||
Удобное самостоятельное бронирование яхты в аренду
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed text-left">
|
||||
Вы можете самостоятельно выбрать яхту на ваш вкус, взять любимую еду и напитки, поставить свой плей-лист.
|
||||
На борту есть все для комфортного размещения. Выбирайте удобную дату, время и бронируйте.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Секция 03 */}
|
||||
<div>
|
||||
<div className="w-12 h-8 border border-blue-200 rounded-lg flex items-center justify-center mb-4">
|
||||
<span className="text-blue-500 font-semibold text-lg">03</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-3 text-left">
|
||||
Организация морских прогулок под ключ
|
||||
</h3>
|
||||
<p className="text-gray-600 leading-relaxed text-left">
|
||||
Вы можете связаться с нами, и наш менеджер поможет вам подобрать яхту, а также организовать праздник на борту:
|
||||
шампанское и фрукты, кейтеринг по меню, музыканты и DJ, украшение яхты, прогулка в подарок.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Правая колонка с изображением и оверлейными карточками */}
|
||||
<div className="lg:w-1/2 relative">
|
||||
<div className="relative">
|
||||
<Image
|
||||
src="/images/yacht.jpg"
|
||||
alt="Яхта в Балаклаве"
|
||||
width={600}
|
||||
height={800}
|
||||
className="rounded-2xl object-cover"
|
||||
/>
|
||||
|
||||
{/* Оверлейные карточки */}
|
||||
<div className="absolute top-8 left-8 bg-white rounded-xl p-4 shadow-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<Image
|
||||
src="/images/yacht.jpg"
|
||||
alt="Яхта"
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-lg object-cover"
|
||||
/>
|
||||
<div>
|
||||
<p className="font-medium text-gray-800">Яхта</p>
|
||||
<div className="flex items-center gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<span key={i} className="text-yellow-400">★</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">124</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute top-1/2 left-8 bg-white rounded-xl p-4 shadow-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<Image
|
||||
src="/images/yacht.jpg"
|
||||
alt="Яхта"
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-lg object-cover"
|
||||
/>
|
||||
<div>
|
||||
<p className="font-medium text-gray-800">Яхта</p>
|
||||
<div className="flex items-center gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<span key={i} className="text-yellow-400">★</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">88</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-8 left-8 bg-white rounded-xl p-4 shadow-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<Image
|
||||
src="/images/yacht.jpg"
|
||||
alt="Яхта"
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-lg object-cover"
|
||||
/>
|
||||
<div>
|
||||
<p className="font-medium text-gray-800">Яхта</p>
|
||||
<div className="flex items-center gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<span key={i} className="text-yellow-400">★</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">88</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<section className="container mx-auto px-4 py-12">
|
||||
<h2 className="text-3xl font-bold mb-8 text-center">Полезные статьи</h2>
|
||||
<h2 className="text-3xl font-bold mb-8 text-left">Полезные статьи</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{articles.map((article, idx) => (
|
||||
<Card key={idx}>
|
||||
<CardHeader>
|
||||
<Image src={article.img} alt={article.title} width={400} height={200} />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardTitle>{article.title}</CardTitle>
|
||||
<p>{article.desc}</p>
|
||||
{articles.map((article) => (
|
||||
<Card key={article.id} className="overflow-hidden">
|
||||
<div className="relative">
|
||||
<Image
|
||||
src={article.image}
|
||||
alt={article.title}
|
||||
width={400}
|
||||
height={200}
|
||||
className="w-full h-48 object-cover"
|
||||
/>
|
||||
</div>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex gap-2 mb-3">
|
||||
{article.tags.map((tag, idx) => (
|
||||
<span
|
||||
key={idx}
|
||||
className="px-2 py-1 text-xs border border-gray-300 rounded text-gray-700"
|
||||
>
|
||||
{typeof tag === 'string' ? tag : tag.text}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-2">
|
||||
{article.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 mb-4">
|
||||
{article.description}
|
||||
</p>
|
||||
{article.hasButton && (
|
||||
<div className="flex justify-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border border-gray-300 text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Читать больше
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/40" />{" "}
|
||||
{/* Оверлей для читаемости */}
|
||||
<div className="relative z-10">
|
||||
<h1 className="text-5xl font-bold mb-4">
|
||||
Аренда яхт в Балканах
|
||||
</h1>
|
||||
<p className="text-2xl">Путешествуйте с Marine Travel</p>
|
||||
<div className="mt-6 flex justify-center space-x-4">
|
||||
{/* Поисковая форма: используйте shadcn input и button */}
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Каталог"
|
||||
className="px-4 py-2 rounded-l-full"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Выберите дату"
|
||||
className="px-4 py-2"
|
||||
/>
|
||||
<button className="bg-primary text-white px-6 py-2 rounded-r-full">
|
||||
Найти
|
||||
</button>
|
||||
<div className="absolute inset-0 bg-black/40" />
|
||||
|
||||
<div className="relative z-10 w-full max-w-6xl mx-auto px-4">
|
||||
{/* Заголовок и подзаголовок */}
|
||||
<div className="text-left mb-8">
|
||||
<h1 className="text-5xl font-bold mb-2">
|
||||
Аренда яхт
|
||||
</h1>
|
||||
<h2 className="text-5xl font-bold mb-4">
|
||||
в Балаклаве
|
||||
</h2>
|
||||
<p className="text-xl text-white/90">
|
||||
Подключись к морскому бризу вместе с Travel Marine
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Поисковая форма */}
|
||||
<Card className="bg-white shadow-lg">
|
||||
<CardContent className="p-6">
|
||||
{/* Основные поля поиска */}
|
||||
<div className="flex flex-col md:flex-row gap-4 mb-4">
|
||||
{/* Локация */}
|
||||
<div className="flex-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start h-12 px-4 text-left"
|
||||
>
|
||||
<MapPin className="w-5 h-5 text-teal-600 mr-3" />
|
||||
<span className="text-gray-700">Балаклава</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Дата и время */}
|
||||
<div className="flex-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start h-12 px-4 text-left"
|
||||
>
|
||||
<Calendar className="w-5 h-5 text-teal-600 mr-3" />
|
||||
<span className="text-gray-700">Выберите дату и время</span>
|
||||
<ChevronDown className="w-4 h-4 text-gray-400 ml-auto" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Количество гостей */}
|
||||
<div className="flex-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start h-12 px-4 text-left"
|
||||
>
|
||||
<Users className="w-5 h-5 text-teal-600 mr-3" />
|
||||
<span className="text-gray-700">Сколько гостей?</span>
|
||||
<ChevronDown className="w-4 h-4 text-gray-400 ml-auto" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Кнопка поиска */}
|
||||
<Button className="bg-teal-600 hover:bg-teal-700 text-white h-12 px-8">
|
||||
Найти
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Фильтры */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button variant="outline" className="h-10">
|
||||
<Coins className="w-4 h-4 text-teal-600 mr-2" />
|
||||
Бюджетные
|
||||
</Button>
|
||||
<Button variant="outline" className="h-10">
|
||||
<Droplets className="w-4 h-4 text-teal-600 mr-2" />
|
||||
Ближайшие
|
||||
</Button>
|
||||
<Button variant="outline" className="h-10">
|
||||
<Coins className="w-4 h-4 text-teal-600 mr-2" />
|
||||
</Button>
|
||||
<Button variant="outline" className="h-10">
|
||||
<Coins className="w-4 h-4 text-teal-600 mr-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<section className="container mx-auto px-4 py-12">
|
||||
<h1 className="text-4xl font-bold mb-4 text-black">
|
||||
Отзывы и истории аренд яхт
|
||||
</h1>
|
||||
<div className="flex gap-6 overflow-x-auto pb-4">
|
||||
{reviewCategories.map((category) => (
|
||||
<div
|
||||
key={category.id}
|
||||
className="flex-shrink-0 text-center"
|
||||
>
|
||||
<div className="relative w-24 h-24 mx-auto mb-3">
|
||||
<Image
|
||||
src={category.image}
|
||||
alt={category.label}
|
||||
fill
|
||||
className="rounded-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm font-medium text-gray-800">
|
||||
{category.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<section className="bg-background py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<h2 className="text-3xl font-bold mb-8 text-center">Морские прогулки</h2>
|
||||
<p className="text-center mb-12">Описание преимуществ...</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Image src="/service1.jpg" alt="Рыбалка" width={600} height={400} className="rounded-lg" />
|
||||
<Image src="/service2.jpg" alt="Парусники" width={600} height={400} className="rounded-lg" />
|
||||
{/* Добавьте больше по макету */}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<section className="bg-background py-12">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-bold mb-4 text-black">
|
||||
Морские прогулки
|
||||
</h1>
|
||||
<h2 className="text-xl text-gray-600 mb-6">
|
||||
Организация "под ключ"
|
||||
</h2>
|
||||
<p className="text-gray-700 max-w-3xl leading-relaxed">
|
||||
Мы поможем выбрать яхту под ваш запрос. Организуем
|
||||
праздник на борту: шампанское и фрукты, кейтеринг по
|
||||
меню, музыканты и DJ, украшение яхты, прогулка в
|
||||
подарок.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Два высоких карусели в одном ряду */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
||||
<Carousel className="w-full">
|
||||
<CarouselContent>
|
||||
<CarouselItem>
|
||||
<div className="relative group">
|
||||
<Image
|
||||
src="/images/rod.png"
|
||||
alt="Морская рыбалка в Балаклаве"
|
||||
width={600}
|
||||
height={500}
|
||||
className="w-full h-[500px] object-cover rounded-lg"
|
||||
/>
|
||||
<div className="absolute top-4 right-4">
|
||||
<Heart className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors" />
|
||||
</div>
|
||||
<div className="absolute bottom-4 left-4 text-white">
|
||||
<h3 className="text-xl font-semibold">
|
||||
Морская рыбалка в Балаклаве
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious className="left-4" />
|
||||
<CarouselNext className="right-4" />
|
||||
</Carousel>
|
||||
|
||||
<Carousel className="w-full">
|
||||
<CarouselContent>
|
||||
<CarouselItem>
|
||||
<div className="relative group">
|
||||
<Image
|
||||
src="/images/rod.png"
|
||||
alt="Прогулка на парусной яхте"
|
||||
width={600}
|
||||
height={500}
|
||||
className="w-full h-[500px] object-cover rounded-lg"
|
||||
/>
|
||||
<div className="absolute top-4 right-4">
|
||||
<Heart className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors" />
|
||||
</div>
|
||||
<div className="absolute bottom-4 left-4 text-white">
|
||||
<h3 className="text-xl font-semibold">
|
||||
Прогулка на парусной яхте
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</CarouselContent>
|
||||
<CarouselPrevious className="left-4" />
|
||||
<CarouselNext className="right-4" />
|
||||
</Carousel>
|
||||
</div>
|
||||
|
||||
{/* Три маленьких карточки на всю ширину */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<Card className="overflow-hidden">
|
||||
<div className="relative group">
|
||||
<Image
|
||||
src="/images/rod.png"
|
||||
alt="Вечеринка на яхте"
|
||||
width={400}
|
||||
height={300}
|
||||
className="w-full h-[300px] object-cover"
|
||||
/>
|
||||
<div className="absolute top-4 right-4">
|
||||
<Heart className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors" />
|
||||
</div>
|
||||
<div className="absolute bottom-4 left-4 text-white">
|
||||
<h3 className="text-lg font-semibold">
|
||||
Вечеринка на яхте
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="overflow-hidden">
|
||||
<div className="relative group">
|
||||
<Image
|
||||
src="/images/rod.png"
|
||||
alt="Корпоративная прогулка на яхте"
|
||||
width={400}
|
||||
height={300}
|
||||
className="w-full h-[300px] object-cover"
|
||||
/>
|
||||
<div className="absolute top-4 right-4">
|
||||
<Heart className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors" />
|
||||
</div>
|
||||
<div className="absolute bottom-4 left-4 text-white">
|
||||
<h3 className="text-lg font-semibold">
|
||||
Корпоративная прогулка на яхте
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="overflow-hidden">
|
||||
<div className="relative group">
|
||||
<Image
|
||||
src="/images/rod.png"
|
||||
alt="Морские прогулки на яхте"
|
||||
width={400}
|
||||
height={300}
|
||||
className="w-full h-[300px] object-cover"
|
||||
/>
|
||||
<div className="absolute top-4 right-4">
|
||||
<Heart className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors" />
|
||||
</div>
|
||||
<div className="absolute bottom-4 left-4 text-white">
|
||||
<h3 className="text-lg font-semibold">
|
||||
Морские прогулки на яхте в Бал...
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Кнопка */}
|
||||
<div className="text-center">
|
||||
<Button size="lg" className="px-8 py-3">
|
||||
Все морские прогулки
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,42 @@
|
|||
import Image from 'next/image'
|
||||
|
||||
export default function VideoSection() {
|
||||
return (
|
||||
<section className="bg-background py-12">
|
||||
<div className="container mx-auto px-4 flex flex-col md:flex-row items-center">
|
||||
<div className="md:w-1/2 pr-8">
|
||||
<h2 className="text-3xl font-bold mb-6">Откройте мир морских прогулок</h2>
|
||||
<p>Описание...</p>
|
||||
<section className="bg-white py-16">
|
||||
<div className="container mx-auto px-4 flex flex-col lg:flex-row items-center gap-12">
|
||||
{/* Левая колонка с текстом */}
|
||||
<div className="lg:w-1/2">
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6 leading-tight">
|
||||
Откройте мир морских прогулок
|
||||
</h2>
|
||||
<p className="text-lg text-gray-700 leading-relaxed">
|
||||
Романтическая прогулка, отдых с семьей, вечеринка с друзьями, спорт и развлечения, элитный отдых, девичник & морская фотосессия.
|
||||
</p>
|
||||
</div>
|
||||
<div className="md:w-1/2 mt-8 md:mt-0">
|
||||
<video controls className="w-full rounded-lg">
|
||||
<source src="/video.mp4" type="video/mp4" />
|
||||
</video>
|
||||
|
||||
{/* Правая колонка с изображением */}
|
||||
<div className="lg:w-1/2 relative">
|
||||
<div className="relative rounded-2xl overflow-hidden shadow-2xl">
|
||||
<Image
|
||||
src="/images/yacht.jpg"
|
||||
alt="Яхта SALVADOR на море"
|
||||
width={800}
|
||||
height={600}
|
||||
className="w-full h-auto"
|
||||
/>
|
||||
{/* Кнопка воспроизведения */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<button className="w-20 h-20 bg-gray-800 bg-opacity-80 hover:bg-opacity-90 rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110">
|
||||
<svg
|
||||
className="w-8 h-8 text-white ml-1"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path d="M8 5v14l11-7z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<section className="container mx-auto px-4 py-12">
|
||||
<h2 className="text-3xl font-bold mb-8 text-center">
|
||||
Яхты в аренду
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{yachts.map((yacht, idx) => (
|
||||
<Card key={idx} className="overflow-hidden">
|
||||
<CardHeader className="p-0">
|
||||
<Image
|
||||
src={yacht.img}
|
||||
alt={yacht.name}
|
||||
width={400}
|
||||
height={300}
|
||||
className="w-full h-48 object-cover"
|
||||
/>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardTitle>{yacht.name}</CardTitle>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<p>{yacht.price}</p>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
<div className="min-h-screen text-white">
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
{/* Header Section */}
|
||||
<div className="mb-12">
|
||||
<h1 className="text-4xl font-bold mb-4 text-black">
|
||||
Яхты в аренду
|
||||
</h1>
|
||||
<h2 className="text-xl text-gray-600 mb-6">
|
||||
Онлайн бронирование яхт
|
||||
</h2>
|
||||
<p className="text-gray-700 max-w-3xl leading-relaxed">
|
||||
Каталог лучших яхт Балаклавы разных ценовых сегментах. Проверенные лодки с лицензией на перевозки, опытные капитаны. Выбирайте удобную дату, время и бронируйте.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Yacht Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
||||
{yachts.map((yacht, idx) => (
|
||||
<Card key={idx} className="overflow-hidden bg-white text-gray-900 shadow-lg">
|
||||
<CardHeader className="p-0 relative">
|
||||
<div className="relative">
|
||||
<Image
|
||||
src={yacht.img}
|
||||
alt={yacht.name}
|
||||
width={400}
|
||||
height={250}
|
||||
className="w-full h-48 object-cover"
|
||||
/>
|
||||
{/* Badge Overlay */}
|
||||
<div className="absolute top-3 left-3">
|
||||
<div className="bg-gray-800 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-1">
|
||||
<span>{yacht.badgeIcon}</span>
|
||||
<span>{yacht.badge}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h3 className="font-bold text-lg">{yacht.name}</h3>
|
||||
<div className="text-right">
|
||||
<p className="font-bold text-lg">{yacht.price}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-gray-600">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>→</span>
|
||||
<span>{yacht.length}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>⚓</span>
|
||||
<span>{yacht.feet}</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Call to Action Button */}
|
||||
<div className="text-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-white text-gray-900 hover:bg-gray-100 px-8 py-3 text-lg font-medium"
|
||||
>
|
||||
Каталог яхт
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<main>
|
||||
<Hero />
|
||||
<Reviews />
|
||||
<YachtGrid />
|
||||
<Services />
|
||||
<Advantages />
|
||||
|
|
|
|||
|
|
@ -1,12 +1,108 @@
|
|||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-primary text-white py-8">
|
||||
<div className="container mx-auto px-4 flex flex-col md:flex-row justify-between">
|
||||
<div>Marine Travel © 2024</div>
|
||||
<div className="space-x-4">
|
||||
<a href="/contacts">Контакты</a>
|
||||
<a href="/privacy">Политика конфиденциальности</a>
|
||||
{/* По макету */}
|
||||
<footer className="bg-white text-gray-500 border-t">
|
||||
<div className="container mx-auto px-4 py-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 items-start">
|
||||
{/* Brand + socials */}
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/">
|
||||
<Image
|
||||
src="/images/logo.svg"
|
||||
alt="Marine Travel"
|
||||
width={150}
|
||||
height={45}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-teal-500">
|
||||
<a
|
||||
href="#"
|
||||
aria-label="VK"
|
||||
className="hover:opacity-80"
|
||||
>
|
||||
vk
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
aria-label="Telegram"
|
||||
className="hover:opacity-80"
|
||||
>
|
||||
tg
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
aria-label="YouTube"
|
||||
className="hover:opacity-80"
|
||||
>
|
||||
yt
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Column 1 */}
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<a href="#" className="hover:text-gray-700">
|
||||
О нас
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-gray-700">
|
||||
Задать вопрос
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-gray-700">
|
||||
Контакты
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-gray-700">
|
||||
Блог
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Column 2 */}
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<a href="#" className="hover:text-gray-700">
|
||||
Разместить яхту
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-gray-700">
|
||||
Договор оферты
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Column 3 */}
|
||||
<ul className="space-y-3">
|
||||
<li>
|
||||
<a href="#" className="hover:text-gray-700">
|
||||
Пользовательское соглашение
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-gray-700">
|
||||
Политика конфиденциальности
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" className="hover:text-gray-700">
|
||||
Раскрытие информации Google
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 flex justify-end text-sm text-gray-400">
|
||||
<span>Сделано в Inavate</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,114 @@
|
|||
"use client";
|
||||
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
} from "@/components/ui/navigation-menu";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { Menu, X, Phone } from "lucide-react";
|
||||
|
||||
export default function Header() {
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
const navigationItems = [
|
||||
{ href: "/catalog", label: "Каталог" },
|
||||
{ href: "/yachts", label: "Яхты" },
|
||||
{ href: "/services", label: "Услуги" },
|
||||
{ href: "/destinations", label: "Маршруты" },
|
||||
{ href: "/about", label: "О нас" },
|
||||
{ href: "/contacts", label: "Контакты" },
|
||||
];
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 bg-white">
|
||||
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<Link href="/">
|
||||
<Image
|
||||
src="/images/logo.svg"
|
||||
alt="Marine Travel"
|
||||
width={150}
|
||||
height={45}
|
||||
/>
|
||||
</Link>
|
||||
<NavigationMenu>
|
||||
<NavigationMenuList className="space-x-6">
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuLink href="/catalog">
|
||||
Каталог
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuLink href="/yachts">
|
||||
Яхты
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuLink href="/about">
|
||||
О нас
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
{/* Добавьте остальные пункты по макету */}
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
<div className="text-primary font-semibold">
|
||||
+7 (123) 456-78-90
|
||||
<header className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100">
|
||||
<div className="container mx-auto px-4 py-4">
|
||||
<div className="flex justify-between items-center">
|
||||
{/* Логотип */}
|
||||
<Link href="/" className="flex-shrink-0">
|
||||
<Image
|
||||
src="/images/logo.svg"
|
||||
alt="Marine Travel"
|
||||
width={150}
|
||||
height={45}
|
||||
className="h-10 w-auto"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Десктопная навигация */}
|
||||
<NavigationMenu className="hidden lg:flex">
|
||||
<NavigationMenuList className="space-x-8">
|
||||
{navigationItems.map((item) => (
|
||||
<NavigationMenuItem key={item.href}>
|
||||
<NavigationMenuLink
|
||||
href={item.href}
|
||||
className="text-gray-700 hover:text-primary transition-colors duration-200 font-medium"
|
||||
>
|
||||
{item.label}
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
))}
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
|
||||
{/* Контакты и кнопка */}
|
||||
<div className="hidden lg:flex items-center space-x-4">
|
||||
<div className="flex items-center space-x-2 text-gray-700">
|
||||
<Phone className="h-4 w-4" />
|
||||
<span className="font-semibold">+7 (123) 456-78-90</span>
|
||||
</div>
|
||||
<Button className="bg-primary hover:bg-primary/90 text-white">
|
||||
Заказать звонок
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Мобильное меню */}
|
||||
<div className="lg:hidden">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
className="text-gray-700"
|
||||
>
|
||||
{isMobileMenuOpen ? (
|
||||
<X className="h-6 w-6" />
|
||||
) : (
|
||||
<Menu className="h-6 w-6" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Мобильное меню */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="lg:hidden mt-4 pb-4 border-t border-gray-100">
|
||||
<nav className="flex flex-col space-y-4 pt-4">
|
||||
{navigationItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="text-gray-700 hover:text-primary transition-colors duration-200 font-medium py-2"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
<div className="pt-4 border-t border-gray-100">
|
||||
<div className="flex items-center space-x-2 text-gray-700 mb-4">
|
||||
<Phone className="h-4 w-4" />
|
||||
<span className="font-semibold">+7 (123) 456-78-90</span>
|
||||
</div>
|
||||
<Button className="w-full bg-primary hover:bg-primary/90 text-white">
|
||||
Заказать звонок
|
||||
</Button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,262 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import useEmblaCarousel, {
|
||||
type UseEmblaCarouselType,
|
||||
} from "embla-carousel-react"
|
||||
import { ArrowLeft, ArrowRight } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
type CarouselApi = UseEmblaCarouselType[1]
|
||||
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
|
||||
type CarouselOptions = UseCarouselParameters[0]
|
||||
type CarouselPlugin = UseCarouselParameters[1]
|
||||
|
||||
type CarouselProps = {
|
||||
opts?: CarouselOptions
|
||||
plugins?: CarouselPlugin
|
||||
orientation?: "horizontal" | "vertical"
|
||||
setApi?: (api: CarouselApi) => void
|
||||
}
|
||||
|
||||
type CarouselContextProps = {
|
||||
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
|
||||
api: ReturnType<typeof useEmblaCarousel>[1]
|
||||
scrollPrev: () => void
|
||||
scrollNext: () => void
|
||||
canScrollPrev: boolean
|
||||
canScrollNext: boolean
|
||||
} & CarouselProps
|
||||
|
||||
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
|
||||
|
||||
function useCarousel() {
|
||||
const context = React.useContext(CarouselContext)
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useCarousel must be used within a <Carousel />")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
const Carousel = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement> & CarouselProps
|
||||
>(
|
||||
(
|
||||
{
|
||||
orientation = "horizontal",
|
||||
opts,
|
||||
setApi,
|
||||
plugins,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const [carouselRef, api] = useEmblaCarousel(
|
||||
{
|
||||
...opts,
|
||||
axis: orientation === "horizontal" ? "x" : "y",
|
||||
},
|
||||
plugins
|
||||
)
|
||||
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
|
||||
const [canScrollNext, setCanScrollNext] = React.useState(false)
|
||||
|
||||
const onSelect = React.useCallback((api: CarouselApi) => {
|
||||
if (!api) {
|
||||
return
|
||||
}
|
||||
|
||||
setCanScrollPrev(api.canScrollPrev())
|
||||
setCanScrollNext(api.canScrollNext())
|
||||
}, [])
|
||||
|
||||
const scrollPrev = React.useCallback(() => {
|
||||
api?.scrollPrev()
|
||||
}, [api])
|
||||
|
||||
const scrollNext = React.useCallback(() => {
|
||||
api?.scrollNext()
|
||||
}, [api])
|
||||
|
||||
const handleKeyDown = React.useCallback(
|
||||
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (event.key === "ArrowLeft") {
|
||||
event.preventDefault()
|
||||
scrollPrev()
|
||||
} else if (event.key === "ArrowRight") {
|
||||
event.preventDefault()
|
||||
scrollNext()
|
||||
}
|
||||
},
|
||||
[scrollPrev, scrollNext]
|
||||
)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api || !setApi) {
|
||||
return
|
||||
}
|
||||
|
||||
setApi(api)
|
||||
}, [api, setApi])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api) {
|
||||
return
|
||||
}
|
||||
|
||||
onSelect(api)
|
||||
api.on("reInit", onSelect)
|
||||
api.on("select", onSelect)
|
||||
|
||||
return () => {
|
||||
api?.off("select", onSelect)
|
||||
}
|
||||
}, [api, onSelect])
|
||||
|
||||
return (
|
||||
<CarouselContext.Provider
|
||||
value={{
|
||||
carouselRef,
|
||||
api: api,
|
||||
opts,
|
||||
orientation:
|
||||
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||
scrollPrev,
|
||||
scrollNext,
|
||||
canScrollPrev,
|
||||
canScrollNext,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={ref}
|
||||
onKeyDownCapture={handleKeyDown}
|
||||
className={cn("relative", className)}
|
||||
role="region"
|
||||
aria-roledescription="carousel"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</CarouselContext.Provider>
|
||||
)
|
||||
}
|
||||
)
|
||||
Carousel.displayName = "Carousel"
|
||||
|
||||
const CarouselContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => {
|
||||
const { carouselRef, orientation } = useCarousel()
|
||||
|
||||
return (
|
||||
<div ref={carouselRef} className="overflow-hidden">
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex",
|
||||
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
CarouselContent.displayName = "CarouselContent"
|
||||
|
||||
const CarouselItem = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => {
|
||||
const { orientation } = useCarousel()
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
className={cn(
|
||||
"min-w-0 shrink-0 grow-0 basis-full",
|
||||
orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
CarouselItem.displayName = "CarouselItem"
|
||||
|
||||
const CarouselPrevious = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<typeof Button>
|
||||
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
||||
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
||||
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn(
|
||||
"absolute h-8 w-8 rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "-left-12 top-1/2 -translate-y-1/2"
|
||||
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!canScrollPrev}
|
||||
onClick={scrollPrev}
|
||||
{...props}
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
<span className="sr-only">Previous slide</span>
|
||||
</Button>
|
||||
)
|
||||
})
|
||||
CarouselPrevious.displayName = "CarouselPrevious"
|
||||
|
||||
const CarouselNext = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<typeof Button>
|
||||
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
||||
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
||||
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn(
|
||||
"absolute h-8 w-8 rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "-right-12 top-1/2 -translate-y-1/2"
|
||||
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!canScrollNext}
|
||||
onClick={scrollNext}
|
||||
{...props}
|
||||
>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
<span className="sr-only">Next slide</span>
|
||||
</Button>
|
||||
)
|
||||
})
|
||||
CarouselNext.displayName = "CarouselNext"
|
||||
|
||||
export {
|
||||
type CarouselApi,
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselPrevious,
|
||||
CarouselNext,
|
||||
}
|
||||
Loading…
Reference in New Issue