133 lines
6.3 KiB
TypeScript
133 lines
6.3 KiB
TypeScript
"use client";
|
||
|
||
import Image from "next/image";
|
||
import { Card, CardContent } from "@/components/ui/card";
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import { useState } from "react";
|
||
import { DatePicker } from "@/components/ui/date-picker";
|
||
import Icon from "@/components/ui/icon";
|
||
|
||
export default function Hero() {
|
||
const [guests, setGuests] = useState("");
|
||
|
||
return (
|
||
<section className="relative h-[600px] rounded-[24px] mx-[16px] overflow-hidden flex text-white">
|
||
<Image
|
||
src="/images/hero-bg.jpg"
|
||
alt="Море"
|
||
fill
|
||
className="object-cover"
|
||
priority
|
||
/>
|
||
<div className="absolute inset-0 bg-black/40" />
|
||
|
||
<div className="relative z-10 w-full max-w-6xl mx-auto px-4 flex flex-col justify-between h-full py-8 pt-24">
|
||
{/* Заголовок и подзаголовок */}
|
||
<div className="text-center md:text-left text-center">
|
||
<h1 className="text-5xl font-bold mb-2">
|
||
Аренда яхт и катеров в Балаклаве
|
||
</h1>
|
||
<p className="text-white/90">
|
||
Насладись морем и Крымом с Travel Marine
|
||
</p>
|
||
</div>
|
||
|
||
{/* Кнопка для мобильных устройств */}
|
||
<div className="md:hidden flex justify-center">
|
||
<Button className="bg-brand hover:bg-brand-hover active:bg-brand-active font-bold text-white h-[64px] border-0 px-8 text-lg w-full">
|
||
Выберите яхту
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Поисковая форма - скрыта на мобильных устройствах */}
|
||
<Card className="bg-white shadow-lg s hidden md:block rounded-full">
|
||
<CardContent className="p-2">
|
||
{/* Основные поля поиска */}
|
||
<div className="flex flex-col md:flex-row gap-4">
|
||
{/* Локация */}
|
||
<div className="flex-1">
|
||
<Button variant="outline" className="w-full h-[64px] px-4 justify-start">
|
||
<div className="flex items-center">
|
||
<Icon
|
||
name="map"
|
||
className="w-5 h-5 text-brand mr-3"
|
||
/>
|
||
<span className="font-normal">Балаклава</span>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Дата и время */}
|
||
<div className="flex-1">
|
||
<DatePicker />
|
||
</div>
|
||
|
||
{/* Количество гостей */}
|
||
<div className="flex-1">
|
||
<Select
|
||
value={guests}
|
||
onValueChange={setGuests}
|
||
>
|
||
<SelectTrigger className="w-full h-[64px] px-4">
|
||
<div className="flex items-center">
|
||
<Icon
|
||
name="people"
|
||
className="w-5 h-5 text-brand mr-3"
|
||
/>
|
||
<SelectValue placeholder="Сколько гостей?" />
|
||
</div>
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="1">
|
||
1 гость
|
||
</SelectItem>
|
||
<SelectItem value="2">
|
||
2 гостя
|
||
</SelectItem>
|
||
<SelectItem value="3">
|
||
3 гостя
|
||
</SelectItem>
|
||
<SelectItem value="4">
|
||
4 гостя
|
||
</SelectItem>
|
||
<SelectItem value="5">
|
||
5 гостей
|
||
</SelectItem>
|
||
<SelectItem value="6">
|
||
6 гостей
|
||
</SelectItem>
|
||
<SelectItem value="7">
|
||
7 гостей
|
||
</SelectItem>
|
||
<SelectItem value="8">
|
||
8 гостей
|
||
</SelectItem>
|
||
<SelectItem value="9">
|
||
9 гостей
|
||
</SelectItem>
|
||
<SelectItem value="10">
|
||
10+ гостей
|
||
</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
|
||
{/* Кнопка поиска */}
|
||
<Button variant="gradient" className="font-bold text-white h-[64px] w-[176px] px-8">
|
||
Найти
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|