Доработки по главной странице, итерация 5

src/app/components/Hero.tsx

@@ -3,20 +3,11 @@
 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";
+import { GuestPicker } from "@/components/form/guest-picker";
 
 export default function Hero() {
-    const [guests, setGuests] = useState("");
-
     return (
         <section className="relative h-[600px] rounded-[24px] mx-[16px] overflow-hidden flex text-white">
             <Image
@@ -71,52 +62,7 @@ export default function Hero() {
 
                             {/* Количество гостей */}
                             <div className="flex-1">
-                                <Select
+                                <GuestPicker />
-                                    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>
 
                             {/* Кнопка поиска */}

src/app/components/Sport.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import Image from "next/image";
+import { Card } from "@/components/ui/card";
+
+// Массив с данными о карточках
+const sportCards = [
+    {
+        id: 1,
+        image: "/images/sport/sport1.jpg",
+        alt: "Вейксерф",
+        title: "Вейксерф",
+    },
+    {
+        id: 2,
+        image: "/images/sport/sport2.jpg",
+        alt: "Вейкборд",
+        title: "Вейкборд",
+    },
+    {
+        id: 3,
+        image: "/images/sport/sport3.jpg",
+        alt: "Гидроциклы",
+        title: "Гидроциклы",
+    },
+    {
+        id: 4,
+        image: "/images/sport/sport4.png",
+        alt: "Дайвинг",
+        title: "Дайвинг",
+    },
+    {
+        id: 5,
+        image: "/images/sport/sport5.jpg",
+        alt: "Сапы",
+        title: "Сапы",
+    },
+    {
+        id: 6,
+        image: "/images/sport/sport6.png",
+        alt: "Каяки",
+        title: "Каяки",
+    },
+];
+
+export default function Sport() {
+    return (
+        <section className="bg-background mt-8 md:mt-12">
+            <div className="container max-w-6xl mx-auto px-4">
+                <div className="mb-8">
+                    <h1 className="text-3xl md:text-4xl font-bold mb-4 text-black">
+                        Активный отдых и спорт
+                    </h1>
+                    <p className="text-gray-700 leading-relaxed">
+                        Идеальное сочетание драйва, свободы и природы.
+                    </p>
+                    <p className="text-gray-700 leading-relaxed">
+                        Попробуйте вейксерф, вейкборд, гидрофоил, дайвинг, сапы
+                        и каяки — каждый из них подарит уникальные впечатления и
+                        сделает вашу морскую прогулку по-настоящему
+                        незабываемой.
+                    </p>
+                </div>
+
+                {/* Три маленьких карточки на всю ширину */}
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                    {sportCards.map((card) => (
+                        <div key={card.id} className="space-y-4">
+                            <Card className="overflow-hidden">
+                                <div className="relative group">
+                                    <Image
+                                        src={card.image}
+                                        alt={card.alt}
+                                        width={400}
+                                        height={200}
+                                        className="w-full h-[200px] object-cover"
+                                    />
+                                </div>
+                            </Card>
+                            <div className="px-2">
+                                <h3 className="text-l font-semibold text-black">
+                                    {card.title}
+                                </h3>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    );
+}

src/app/globals.css

@@ -133,3 +133,7 @@
         @apply bg-background text-foreground;
     }
 }
+
+input[type="time"]::-webkit-calendar-picker-indicator {
+    background: none;
+}

src/app/page.tsx

@@ -5,6 +5,7 @@ import Advantages from "@/app/components/Advantages";
 import VideoSection from "@/app/components/VideoSection";
 import Articles from "@/app/components/Articles";
 import Reviews from "@/app/components/Reviews";
+import Sport from "@/app/components/Sport";
 
 export default function Home() {
     return (
@@ -13,6 +14,7 @@ export default function Home() {
             <Reviews />
             <YachtGrid />
             <Services />
+            <Sport />
             <Advantages />
             <VideoSection />
             <Articles />

src/components/form/guest-picker.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+    Select,
+    SelectContent,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import Icon from "../ui/icon";
+import { Counter } from "../ui/counter";
+
+interface GuestPickerProps {
+    onApply?: (adults: number, children: number) => void;
+    className?: string;
+}
+
+export const GuestPicker: React.FC<GuestPickerProps> = ({ onApply }) => {
+    const [adults, setAdults] = useState<number>(1);
+    const [children, setChildren] = useState<number>(0);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    const handleApply = () => {
+        onApply?.(adults, children);
+        setIsOpen(false);
+    };
+
+    const getDisplayText = () => {
+        const total = adults + children;
+        if (total === 0) return "Сколько гостей?";
+        if (children === 0)
+            return `${adults} ${adults === 1 ? "взрослый" : "взрослых"}`;
+        return `${adults} ${
+            adults === 1 ? "взрослый" : "взрослых"
+        }, ${children} ${children === 1 ? "ребенок" : "детей"}`;
+    };
+
+    return (
+        <div>
+            <Select
+                open={isOpen}
+                onOpenChange={setIsOpen}
+            >
+                <SelectTrigger className="h-[64px] px-4">
+                    <div className="flex items-center">
+                        <Icon
+                            name="people"
+                            className="mr-3"
+                        />
+                        <SelectValue placeholder={getDisplayText()} />
+                    </div>
+                </SelectTrigger>
+                <SelectContent className="rounded-[20px] p-6 pb-4">
+                    <div className="mb-4">
+                        <Counter
+                            label="Взрослые"
+                            value={adults}
+                            onChange={setAdults}
+                            min={1}
+                            max={10}
+                        />
+                    </div>
+                    <div className="mb-4">
+                        <Counter
+                            label="Дети"
+                            value={children}
+                            onChange={setChildren}
+                            min={0}
+                            max={10}
+                        />
+                    </div>
+                    <Button
+                        onClick={handleApply}
+                        variant="gradient"
+                        className="font-bold text-white h-[44px] w-full px-8"
+                    >
+                        Применить
+                    </Button>
+                </SelectContent>
+            </Select>
+        </div>
+    );
+};

src/components/ui/calendar.tsx

@@ -1,216 +1,230 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
 import {
-  ChevronDownIcon,
+    ChevronDownIcon,
-  ChevronLeftIcon,
+    ChevronLeftIcon,
-  ChevronRightIcon,
+    ChevronRightIcon,
-} from "lucide-react"
+} from "lucide-react";
-import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
-import { ru } from "date-fns/locale"
+import { ru } from "date-fns/locale";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { Button, buttonVariants } from "@/components/ui/button"
+import { Button, buttonVariants } from "@/components/ui/button";
 
 function Calendar({
-  className,
+    className,
-  classNames,
+    classNames,
-  showOutsideDays = true,
+    showOutsideDays = true,
-  captionLayout = "label",
+    captionLayout = "label",
-  buttonVariant = "ghost",
+    buttonVariant = "ghost",
-  formatters,
+    formatters,
-  components,
+    components,
-  ...props
+    ...props
 }: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }) {
-  const defaultClassNames = getDefaultClassNames()
+    const defaultClassNames = getDefaultClassNames();
 
-  return (
+    return (
-    <DayPicker
+        <DayPicker
-      locale={ru}
+            locale={ru}
-      showOutsideDays={showOutsideDays}
+            showOutsideDays={showOutsideDays}
-      className={cn(
+            className={cn(
-        "bg-background group/calendar p-4 [--cell-size:2.5rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+                "bg-background group/calendar p-4 [--cell-size:2.5rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+                String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+                String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className
+                className
-      )}
+            )}
-      captionLayout={captionLayout}
+            captionLayout={captionLayout}
-      formatters={{
+            formatters={{
-        formatMonthDropdown: (date) =>
+                formatMonthDropdown: (date) =>
-          date.toLocaleString("ru", { month: "short" }),
+                    date.toLocaleString("ru", { month: "short" }),
-        ...formatters,
+                ...formatters,
+            }}
+            classNames={{
+                root: cn("w-fit", defaultClassNames.root),
+                months: cn(
+                    "relative flex flex-col gap-6 md:flex-row",
+                    defaultClassNames.months
+                ),
+                month: cn(
+                    "flex w-full flex-col gap-6",
+                    defaultClassNames.month
+                ),
+                nav: cn(
+                    "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+                    defaultClassNames.nav
+                ),
+                button_previous: cn(
+                    buttonVariants({ variant: buttonVariant }),
+                    "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+                    defaultClassNames.button_previous
+                ),
+                button_next: cn(
+                    buttonVariants({ variant: buttonVariant }),
+                    "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+                    defaultClassNames.button_next
+                ),
+                month_caption: cn(
+                    "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+                    defaultClassNames.month_caption
+                ),
+                dropdowns: cn(
+                    "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+                    defaultClassNames.dropdowns
+                ),
+                dropdown_root: cn(
+                    "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+                    defaultClassNames.dropdown_root
+                ),
+                dropdown: cn(
+                    "bg-popover absolute inset-0 opacity-0",
+                    defaultClassNames.dropdown
+                ),
+                caption_label: cn(
+                    "select-none font-medium",
+                    captionLayout === "label"
+                        ? "text-sm"
+                        : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+                    defaultClassNames.caption_label
+                ),
+                table: "w-full border-collapse",
+                weekdays: cn("flex", defaultClassNames.weekdays),
+                weekday: cn(
+                    "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal p-2",
+                    defaultClassNames.weekday
+                ),
+                week: cn("mt-3 flex w-full", defaultClassNames.week),
+                week_number_header: cn(
+                    "w-[--cell-size] select-none",
+                    defaultClassNames.week_number_header
+                ),
+                week_number: cn(
+                    "text-muted-foreground select-none text-[0.8rem]",
+                    defaultClassNames.week_number
+                ),
+                day: cn(
+                    "group/day relative aspect-square h-full w-full select-none p-1 text-center",
+                    defaultClassNames.day
+                ),
+                range_start: cn(
+                    "bg-accent rounded-l-md",
+                    defaultClassNames.range_start
+                ),
+                range_middle: cn(
+                    "rounded-none",
+                    defaultClassNames.range_middle
+                ),
+                range_end: cn(
+                    "bg-accent rounded-r-md",
+                    defaultClassNames.range_end
+                ),
+                today: cn(
+                    "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+                    defaultClassNames.today
+                ),
+                outside: cn(
+                    "text-muted-foreground aria-selected:text-muted-foreground",
+                    defaultClassNames.outside
+                ),
+                disabled: cn(
+                    "text-muted-foreground opacity-50",
+                    defaultClassNames.disabled
+                ),
+                hidden: cn("invisible", defaultClassNames.hidden),
+                ...classNames,
+            }}
+            components={{
+                Root: ({ className, rootRef, ...props }) => {
+                    return (
+                        <div
+                            data-slot="calendar"
+                            ref={rootRef}
+                            className={cn(className)}
+                            {...props}
+                        />
+                    );
+                },
+                Chevron: ({ className, orientation, ...props }) => {
+                    if (orientation === "left") {
+                        return (
+                            <ChevronLeftIcon
+                                className={cn("size-4", className)}
+                                {...props}
+                            />
+                        );
+                    }
 
-      }}
+                    if (orientation === "right") {
-      classNames={{
+                        return (
-        root: cn("w-fit", defaultClassNames.root),
+                            <ChevronRightIcon
-        months: cn(
+                                className={cn("size-4", className)}
-          "relative flex flex-col gap-6 md:flex-row",
+                                {...props}
-          defaultClassNames.months
+                            />
-        ),
+                        );
-        month: cn("flex w-full flex-col gap-6", defaultClassNames.month),
+                    }
-        nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
-          defaultClassNames.month_caption
-        ),
-        dropdowns: cn(
-          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
-          defaultClassNames.dropdowns
-        ),
-        dropdown_root: cn(
-          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
-          defaultClassNames.dropdown_root
-        ),
-        dropdown: cn(
-          "bg-popover absolute inset-0 opacity-0",
-          defaultClassNames.dropdown
-        ),
-        caption_label: cn(
-          "select-none font-medium",
-          captionLayout === "label"
-            ? "text-sm"
-            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
-          defaultClassNames.caption_label
-        ),
-        table: "w-full border-collapse",
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal p-2",
-          defaultClassNames.weekday
-        ),
-        week: cn("mt-3 flex w-full", defaultClassNames.week),
-        week_number_header: cn(
-          "w-[--cell-size] select-none",
-          defaultClassNames.week_number_header
-        ),
-        week_number: cn(
-          "text-muted-foreground select-none text-[0.8rem]",
-          defaultClassNames.week_number
-        ),
-        day: cn(
-          "group/day relative aspect-square h-full w-full select-none p-1 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
-          defaultClassNames.day
-        ),
-        range_start: cn(
-          "bg-accent rounded-l-md",
-          defaultClassNames.range_start
-        ),
-        range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
-        today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
-          defaultClassNames.today
-        ),
-        outside: cn(
-          "text-muted-foreground aria-selected:text-muted-foreground",
-          defaultClassNames.outside
-        ),
-        disabled: cn(
-          "text-muted-foreground opacity-50",
-          defaultClassNames.disabled
-        ),
-        hidden: cn("invisible", defaultClassNames.hidden),
-        ...classNames,
-      }}
-      components={{
-        Root: ({ className, rootRef, ...props }) => {
-          return (
-            <div
-              data-slot="calendar"
-              ref={rootRef}
-              className={cn(className)}
-              {...props}
-            />
-          )
-        },
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === "left") {
-            return (
-              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
-            )
-          }
 
-          if (orientation === "right") {
+                    return (
-            return (
+                        <ChevronDownIcon
-              <ChevronRightIcon
+                            className={cn("size-4", className)}
-                className={cn("size-4", className)}
+                            {...props}
-                {...props}
+                        />
-              />
+                    );
-            )
+                },
-          }
+                DayButton: CalendarDayButton,
-
+                WeekNumber: ({ children, ...props }) => {
-          return (
+                    return (
-            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+                        <td {...props}>
-          )
+                            <div className="flex size-[--cell-size] items-center justify-center text-center">
-        },
+                                {children}
-        DayButton: CalendarDayButton,
+                            </div>
-        WeekNumber: ({ children, ...props }) => {
+                        </td>
-          return (
+                    );
-            <td {...props}>
+                },
-              <div className="flex size-[--cell-size] items-center justify-center text-center">
+                ...components,
-                {children}
+            }}
-              </div>
+            {...props}
-            </td>
+        />
-          )
+    );
-        },
-        ...components,
-      }}
-      {...props}
-    />
-  )
 }
 
 function CalendarDayButton({
-  className,
+    className,
-  day,
+    day,
-  modifiers,
+    modifiers,
-  ...props
+    ...props
 }: React.ComponentProps<typeof DayButton>) {
-  const defaultClassNames = getDefaultClassNames()
+    const defaultClassNames = getDefaultClassNames();
 
-  const ref = React.useRef<HTMLButtonElement>(null)
+    const ref = React.useRef<HTMLButtonElement>(null);
-  React.useEffect(() => {
+    React.useEffect(() => {
-    if (modifiers.focused) ref.current?.focus()
+        if (modifiers.focused) ref.current?.focus();
-  }, [modifiers.focused])
+    }, [modifiers.focused]);
 
-  return (
+    return (
-    <Button
+        <Button
-      ref={ref}
+            ref={ref}
-      variant="ghost"
+            variant="ghost"
-      size="icon"
+            size="icon"
-      data-day={day.date.toLocaleDateString()}
+            data-day={day.date.toLocaleDateString()}
-      data-selected-single={
+            data-selected-single={
-        modifiers.selected &&
+                modifiers.selected &&
-        !modifiers.range_start &&
+                !modifiers.range_start &&
-        !modifiers.range_end &&
+                !modifiers.range_end &&
-        !modifiers.range_middle
+                !modifiers.range_middle
-      }
+            }
-      data-range-start={modifiers.range_start}
+            data-range-start={modifiers.range_start}
-      data-range-end={modifiers.range_end}
+            data-range-end={modifiers.range_end}
-      data-range-middle={modifiers.range_middle}
+            data-range-middle={modifiers.range_middle}
-      className={cn(
+            className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+                "data-[selected-single=true]:text-primary-foreground data-[selected-single=true]:hover:bg-[#008299] data-[selected-single=true]:hover:text-primary-foreground data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground  group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
+                defaultClassNames.day,
-        className
+                className
-      )}
+            )}
-      {...props}
+            {...props}
-    />
+        />
-  )
+    );
 }
 
-export { Calendar, CalendarDayButton }
+export { Calendar, CalendarDayButton };

src/components/ui/counter.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import React from "react";
+import { Plus, Minus } from "lucide-react";
+
+interface CounterProps {
+    label: string;
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+}
+
+export const Counter: React.FC<CounterProps> = ({
+    label,
+    value,
+    onChange,
+    min = 0,
+    max = 10,
+}) => {
+    const handleIncrement = () => {
+        if (value < max) {
+            onChange(value + 1);
+        }
+    };
+
+    const handleDecrement = () => {
+        if (value > min) {
+            onChange(value - 1);
+        }
+    };
+
+    return (
+        <div className="relative flex w-full items-center justify-between items-center border border-gray-200 rounded-full px-8 py-4 bg-white">
+            <label className="absolute left-[32px] top-0 transform -translate-y-1/2 text-xs text-gray-500 transition-all duration-200 bg-white px-1">
+                {label}
+            </label>
+            <button
+                onClick={handleDecrement}
+                disabled={value <= min}
+                className={`w-8 h-8 rounded-[8px] border flex items-center justify-center ${
+                    value <= min
+                        ? "border-gray-300 text-gray-300 cursor-not-allowed"
+                        : "border-gray-400 text-gray-600 hover:border-gray-500"
+                }`}
+            >
+                <Minus className="w-4 h-4" />
+            </button>
+            <span className="mx-4 text-gray-800 font-medium min-w-[20px] text-center">
+                {value}
+            </span>
+            <button
+                onClick={handleIncrement}
+                disabled={value >= max}
+                className={`w-8 h-8 rounded-[8px] border flex items-center justify-center ${
+                    value >= max
+                        ? "border-gray-300 text-gray-300 cursor-not-allowed"
+                        : "border-teal-500 text-[#008299] hover:border-[#008299]"
+                }`}
+            >
+                <Plus className="w-4 h-4" />
+            </button>
+        </div>
+    );
+};
+
+export default Counter;

src/components/ui/date-picker.tsx

@@ -18,14 +18,15 @@ export function DatePicker() {
     const [date, setDate] = React.useState<Date>();
     const [departureTime, setDepartureTime] = React.useState("12:00");
     const [arrivalTime, setArrivalTime] = React.useState("13:00");
+    const [open, setOpen] = React.useState(false);
 
     const handleApply = () => {
-        // Логика применения выбранных даты и времени
+        // Закрываем popover после применения
-        console.log("Применено:", { date, departureTime, arrivalTime });
+        setOpen(false);
     };
 
     return (
-        <Popover>
+        <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
                 <Button
                     variant="outline"
@@ -34,13 +35,13 @@ export function DatePicker() {
                 >
                     <Icon name="calendar" className="w-4 h-4 text-brand mr-2" />
                     {date ? (
-                        format(date, `dd.MM, ${departureTime} - ${arrivalTime}`)
+                        format(date, `d MMMM, ${departureTime} - ${arrivalTime}`, { locale: ru })
                     ) : (
                         <span>Выберите дату и время</span>
                     )}
                 </Button>
             </PopoverTrigger>
-            <PopoverContent className="w-[360px] p-0 bg-white rounded-[20px] shadow-lg">
+            <PopoverContent className="p-0 bg-white rounded-[20px] shadow-lg">
                 <div className="p-4 w-full">
                     {/* Календарь */}
                     <Calendar
@@ -65,19 +66,20 @@ export function DatePicker() {
                             weekdays: "flex",
                             weekday:
                                 "flex-1 text-gray-500 text-xs font-normal p-2 text-center",
+                            day_button: "font-bold",
                             week: "mt-2 flex w-full",
                             today: "bg-gray-100 text-gray-900",
                             outside: "text-gray-300",
                             disabled: "text-gray-400 cursor-not-allowed",
+                            day_selected: "!bg-red",
+                            selected:
+                                "rounded-full border-none outline-none !bg-[#008299] text-white",
                         }}
                     />
 
                     {/* Поля времени */}
                     <div className="flex gap-3 mb-4">
                         <div className="flex-1">
-                            <label className="block text-xs text-gray-500 mb-1">
-                                Выход
-                            </label>
                             <div className="relative">
                                 <input
                                     type="time"
@@ -85,15 +87,15 @@ export function DatePicker() {
                                     onChange={(e) =>
                                         setDepartureTime(e.target.value)
                                     }
-                                    className="w-full h-10 px-3 border border-gray-300 rounded-md text-gray-700 font-medium focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent"
+                                    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"
                                 />
+                                <label className="absolute left-[24px] top-0 transform -translate-y-1/2 text-xs text-gray-500 pointer-events-none transition-all duration-200 bg-white px-1">
+                                    Выход
+                                </label>
                                 <ChevronDownIcon className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500 pointer-events-none" />
                             </div>
                         </div>
                         <div className="flex-1">
-                            <label className="block text-xs text-gray-500 mb-1">
-                                Заход
-                            </label>
                             <div className="relative">
                                 <input
                                     type="time"
@@ -101,8 +103,11 @@ export function DatePicker() {
                                     onChange={(e) =>
                                         setArrivalTime(e.target.value)
                                     }
-                                    className="w-full h-10 px-3 border border-gray-300 rounded-md text-gray-700 font-medium focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent"
+                                    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"
                                 />
+                                <label className="absolute left-[24px] top-0 transform -translate-y-1/2 text-xs text-gray-500 pointer-events-none transition-all duration-200 bg-white px-1">
+                                    Заход
+                                </label>
                                 <ChevronDownIcon className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500 pointer-events-none" />
                             </div>
                         </div>

src/components/ui/icon.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, memo } from "react";
-import { IconProps } from "../../types/icon";
 
+import { SVGProps } from "react";
 // Импорт SVG иконок как React компонентов
 import CalendarIcon from "../../../public/images/icons/calendar.svg";
 import MapIcon from "../../../public/images/icons/map.svg";
@@ -33,6 +33,31 @@ const icons = {
     tg: TgIcon,
 };
 
+export type IconName =
+    | "calendar"
+    | "map"
+    | "money"
+    | "people"
+    | "logo"
+    | "restart"
+    | "anchor"
+    | "width"
+    | "like"
+    | "star"
+    | "vk"
+    | "dzen"
+    | "tg";
+
+export interface IconProps
+    extends Omit<SVGProps<SVGSVGElement>, "name" | "preserveAspectRatio"> {
+    name: IconName;
+    className?: string;
+    size?: number | string;
+    color?: string;
+    preserveAspectRatio?: boolean;
+    maxSize?: number | string;
+}
+
 // Компонент Icon оптимизированный для Next.js
 export const Icon = memo(
     forwardRef<SVGSVGElement, IconProps>(

src/types/icon.ts

@@ -1,26 +1 @@
-import { SVGProps } from "react";
 
-export type IconName =
-    | "calendar"
-    | "map"
-    | "money"
-    | "people"
-    | "logo"
-    | "restart"
-    | "anchor"
-    | "width"
-    | "like"
-    | "star"
-    | "vk"
-    | "dzen"
-    | "tg";
-
-export interface IconProps
-    extends Omit<SVGProps<SVGSVGElement>, "name" | "preserveAspectRatio"> {
-    name: IconName;
-    className?: string;
-    size?: number | string;
-    color?: string;
-    preserveAspectRatio?: boolean;
-    maxSize?: number | string;
-}