diff --git a/public/images/icons/ad.svg b/public/images/icons/ad.svg new file mode 100644 index 0000000..50c4944 --- /dev/null +++ b/public/images/icons/ad.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/components/FeaturedYacht.tsx b/src/app/components/FeaturedYacht.tsx index e1f6035..d0530b0 100644 --- a/src/app/components/FeaturedYacht.tsx +++ b/src/app/components/FeaturedYacht.tsx @@ -3,13 +3,6 @@ import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { DatePicker } from "@/components/ui/date-picker"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "@/components/ui/select"; import { Carousel, CarouselContent, @@ -20,6 +13,7 @@ import { import Image from "next/image"; import Icon from "@/components/ui/icon"; import { useState } from "react"; +import { GuestPicker } from "@/components/form/guest-picker"; const yacht = { name: "Яхта", @@ -58,6 +52,22 @@ export default function FeaturedYacht() {
{/* Left side - Yacht details and images */}
+ {/* Promoted banner - Mobile only */} +
+ + Заметнее других — бронируют быстрее + +
+ {/* Header with yacht name and length */}

@@ -101,18 +111,21 @@ export default function FeaturedYacht() {
{`${yacht.name} - handleThumbnailClick(thumb) + handleThumbnailClick( + thumb + ) } />
@@ -126,7 +139,8 @@ export default function FeaturedYacht() { {/* Promoted badge */} {yacht.isPromoted && ( -
+
+ Это объявление продвигается.{" "} @@ -140,9 +154,9 @@ export default function FeaturedYacht() { {/* Right side - Booking form */}
- {/* Promoted banner */} + {/* Promoted banner - Desktop only */}
- +
- +
- +
diff --git a/src/app/components/YachtGrid.tsx b/src/app/components/YachtGrid.tsx index 1563855..bc2b86f 100644 --- a/src/app/components/YachtGrid.tsx +++ b/src/app/components/YachtGrid.tsx @@ -12,6 +12,7 @@ const yachts = [ feet: "7 Футов", img: "/images/yachts/yacht1.jpg", bestOfferText: "🔥 Лучшее предложение", + colorPrice: true, }, { name: "Яхта", @@ -92,7 +93,8 @@ export default function YachtGrid() {
@@ -127,24 +129,41 @@ export default function YachtGrid() {
-
-

- {yacht.name} -

-
-

- {yacht.price} -

+
+ {/* Левая колонка - название и длина */} +
+

+ {yacht.name} +

+
+ + {yacht.length} +
-
-
-
- - {yacht.length} -
-
- - {yacht.feet} + + {/* Правая колонка - цена и футы */} +
+
+ {yacht.colorPrice ? ( +

+ {yacht.price} +

+ ) : ( +

+ {yacht.price} +

+ )} +
+
+ + {yacht.feet} +
diff --git a/src/components/form/guest-picker.tsx b/src/components/form/guest-picker.tsx index 35e8228..dfbde6a 100644 --- a/src/components/form/guest-picker.tsx +++ b/src/components/form/guest-picker.tsx @@ -14,9 +14,10 @@ import { ChevronUp, ChevronDown } from "lucide-react"; interface GuestPickerProps { onApply?: (adults: number, children: number) => void; className?: string; + showIcon?: boolean; } -export const GuestPicker: React.FC = ({ onApply }) => { +export const GuestPicker: React.FC = ({ onApply, showIcon = true }) => { const [adults, setAdults] = useState(0); const [children, setChildren] = useState(0); const [isOpen, setIsOpen] = useState(false); @@ -48,11 +49,13 @@ export const GuestPicker: React.FC = ({ onApply }) => { className="h-[64px] px-4 w-full justify-between" >
- - {getDisplayText()} + {showIcon && ( + + )} + {getDisplayText()}
{isOpen ? ( diff --git a/src/components/ui/date-picker.tsx b/src/components/ui/date-picker.tsx index d3b95ce..64b5d15 100644 --- a/src/components/ui/date-picker.tsx +++ b/src/components/ui/date-picker.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import { format } from "date-fns"; import { ru } from "date-fns/locale"; -import { ChevronDownIcon } from "lucide-react"; +import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Calendar } from "@/components/ui/calendar"; @@ -14,7 +14,11 @@ import { } from "@/components/ui/popover"; import Icon from "./icon"; -export function DatePicker() { +interface DatePickerProps { + showIcon?: boolean; +} + +export function DatePicker({ showIcon = true }: DatePickerProps) { const [date, setDate] = React.useState(); const [departureTime, setDepartureTime] = React.useState("12:00"); const [arrivalTime, setArrivalTime] = React.useState("13:00"); @@ -31,13 +35,29 @@ export function DatePicker() { @@ -79,37 +99,32 @@ export function DatePicker() { {/* Поля времени */}
-
-
- - setDepartureTime(e.target.value) - } - className="w-full h-12 px-3 border border-gray-300 rounded-full text-gray-700 font-medium text-center focus:outline-none focus:ring-2 focus:ring-[#008299] focus:border-transparent" - /> - - -
+
+ + + + setDepartureTime(e.target.value) + } + className="w-full h-12 px-3 border border-gray-300 rounded-full text-gray-700 font-medium text-center focus:outline-none focus:ring-2 focus:ring-[#008299] focus:border-transparent" + />
-
-
- - setArrivalTime(e.target.value) - } - className="w-full h-12 px-3 border border-gray-300 rounded-full text-gray-700 font-medium text-center focus:outline-none focus:ring-2 focus:ring-[#008299] focus:border-transparent" - /> - - -
+ +
+ + + setArrivalTime(e.target.value)} + className="w-full h-12 px-3 border border-gray-300 rounded-full text-gray-700 font-medium text-center focus:outline-none focus:ring-2 focus:ring-[#008299] focus:border-transparent" + />
diff --git a/src/components/ui/icon.tsx b/src/components/ui/icon.tsx index 5cfc724..8ca877b 100644 --- a/src/components/ui/icon.tsx +++ b/src/components/ui/icon.tsx @@ -15,6 +15,7 @@ import StarIcon from "../../../public/images/icons/star.svg"; import VkIcon from "../../../public/images/icons/vk.svg"; import DzenIcon from "../../../public/images/icons/dzen.svg"; import TgIcon from "../../../public/images/icons/tg.svg"; +import AdIcon from "../../../public/images/icons/ad.svg"; // Объект с иконками для удобного доступа const icons = { @@ -31,6 +32,7 @@ const icons = { vk: VkIcon, dzen: DzenIcon, tg: TgIcon, + ad: AdIcon, }; export type IconName = @@ -46,7 +48,8 @@ export type IconName = | "star" | "vk" | "dzen" - | "tg"; + | "tg" + | "ad"; export interface IconProps extends Omit, "name" | "preserveAspectRatio"> {