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

src/app/components/Articles.tsx

@@ -5,14 +5,14 @@ import Image from "next/image";
 const articles = [
     {
         id: 1,
-        image: "/images/yacht.jpg",
+        image: "/images/articles/article1.jpg",
         tags: ["Полезное", "Интересное"],
-        title: "Тема публикации",
+        title: "Вейксерф в Балаклаве – испытай новые ощущения с сёрф-клубом «Рурайдер»!",
-        description: "Текст публикации",
+        description: "В последние годы вейксерф стал настоящим хитом среди любителей активного отдыха и адреналина.",
     },
     {
         id: 2,
-        image: "/images/yacht.jpg",
+        image: "/images/articles/article2.jpg",
         tags: ["Полезное", "Интересное"],
         title: "В чем отличия яхты, катера и лодки?",
         description:
@@ -20,7 +20,7 @@ const articles = [
     },
     {
         id: 3,
-        image: "/images/yacht.jpg",
+        image: "/images/articles/article3.jpg",
         tags: [
             { text: "Дзен", icon: "D" },
             { text: "VK", icon: "VK" },

src/app/components/Hero.tsx

@@ -32,10 +32,11 @@ export default function Hero() {
             <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>
+                    <h1 className="text-5xl font-bold mb-2">
-                    <h2 className="text-5xl font-bold mb-4">в Балаклаве</h2>
+                        Аренда яхт и катеров в Балаклаве
-                    <p className="text-ь text-white/90">
+                    </h1>
-                        Подключись к морскому бризу вместе с Travel Marine
+                    <p className="text-white/90">
+                        Насладись морем и Крымом с Travel Marine
                     </p>
                 </div>
 
@@ -47,8 +48,8 @@ export default function Hero() {
                 </div>
 
                 {/* Поисковая форма - скрыта на мобильных устройствах */}
-                <Card className="bg-white shadow-lg s hidden md:block">
+                <Card className="bg-white shadow-lg s hidden md:block rounded-full">
-                    <CardContent className="p-6">
+                    <CardContent className="p-2">
                         {/* Основные поля поиска */}
                         <div className="flex flex-col md:flex-row gap-4">
                             {/* Локация */}
@@ -146,40 +147,6 @@ export default function Hero() {
                                 Найти
                             </Button>
                         </div>
-
-                        {/* Фильтры */}
-                        <div className="hidden lg:flex flex flex-wrap gap-2 mt-4">
-                            <Button variant="outline" className="h-[34px]">
-                                <Icon
-                                    size={30}
-                                    name="money"
-                                    className="w-4 h-4 text-brand mr-2"
-                                />
-                                Бюджетные
-                            </Button>
-                            <Button variant="outline" className="h-[34px]">
-                                <Icon
-                                    size={30}
-                                    name="money"
-                                    className="w-4 h-4 text-brand mr-2"
-                                />
-                                Ближайшие
-                            </Button>
-                            <Button variant="outline" className="h-[34px]">
-                                <Icon
-                                    size={30}
-                                    name="money"
-                                    className="w-4 h-4 text-brand mr-2"
-                                />
-                            </Button>
-                            <Button variant="outline" className="h-[34px]">
-                                <Icon
-                                    size={30}
-                                    name="money"
-                                    className="w-4 h-4 text-brand mr-2"
-                                />
-                            </Button>
-                        </div>
                     </CardContent>
                 </Card>
             </div>

src/app/components/Reviews.tsx

@@ -3,61 +3,80 @@ import Image from "next/image";
 const reviewCategories = [
     {
         id: 1,
-        image: "/images/heart.png",
+        image: "/images/reviews/review1.jpg",
-        label: "Отзывы",
+        label: "ОТЗЫВЫ",
     },
     {
         id: 2,
-        image: "/images/heart.png",
+        image: "/images/reviews/review2.jpg",
-        label: "Свидание",
+        label: "АКТИВНЫЙ ОТДЫХ",
     },
     {
         id: 3,
-        image: "/images/heart.png",
+        image: "/images/reviews/review3.jpg",
-        label: "Закат",
+        label: "ЗАКАТ",
     },
     {
         id: 4,
-        image: "/images/heart.png",
+        image: "/images/reviews/review4.jpg",
-        label: "С детьми",
+        label: "С ДЕТЬМИ",
     },
     {
         id: 5,
-        image: "/images/heart.png",
+        image: "/images/reviews/review5.jpg",
-        label: "Вечеринка",
+        label: "ВЕЧЕРИНКА",
     },
     {
         id: 6,
-        image: "/images/heart.png",
+        image: "/images/reviews/review6.jpg",
-        label: "Девичник",
+        label: "ДЕВИЧНИК",
+    },
+    {
+        id: 7,
+        image: "/images/reviews/review7.jpg",
+        label: "СВИДАНИЕ",
+    },
+    {
+        id: 8,
+        image: "/images/reviews/review8.jpg",
+        label: "ПРЕДЛОЖЕНИЕ",
     },
 ];
 
 export default function Reviews() {
     return (
-        <section className="container mx-auto max-w-6xl px-4 mt-8 md:mt-12">
+        <section className="mt-8 md:mt-12">
-            <h1 className="text-3xl md:text-4xl font-bold mb-4 md:mb-8 text-black">
+            <div className="container mx-auto max-w-6xl px-4">
-                Отзывы и истории аренд яхт
+                <h1 className="text-3xl md:text-4xl font-bold mb-8 text-black">
-            </h1>
+                    Впечатления и отзывы
-            <div className="flex gap-12 overflow-x-auto pb-4">
+                </h1>
-                {reviewCategories.map((category) => (
+                <div className="flex gap-6 flex-wrap">
-                    <div
+                    {reviewCategories.map((category) => (
-                        key={category.id}
+                        <div
-                        className="flex-shrink-0 text-center cursor-pointer"
+                            key={category.id}
-                    >
+                            className="flex-1 min-w-28 cursor-pointer group"
-                        <div className="relative w-16 h-16 md:w-24 md:h-24 mx-auto mb-3">
+                        >
-                            <Image
+                            <div className="relative w-full h-39 rounded-lg overflow-hidden">
-                                src={category.image}
+                                <Image
-                                alt={category.label}
+                                    src={category.image}
-                                fill
+                                    alt={category.label}
-                                className="rounded-full object-cover"
+                                    fill
-                            />
+                                    className="object-cover"
+                                />
+                                {/* Градиентный оверлей */}
+                                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+                                {/* Цветная внутренняя граница */}
+                                <div className="absolute inset-1 border-2 border-brand rounded-md group-hover:border-dashed"></div>
+                                {/* Текст внизу карточки */}
+                                <div className="absolute bottom-0 left-0 right-0 p-3">
+                                    <p className="text-white font-medium text-xs text-center">
+                                        {category.label}
+                                    </p>
+                                </div>
+                            </div>
                         </div>
-                        <p className="text-sm font-medium text-gray-800">
+                    ))}
-                            {category.label}
+                </div>
-                        </p>
-                    </div>
-                ))}
             </div>
         </section>
     );

src/app/components/VideoSection.tsx

@@ -18,7 +18,7 @@ export default function VideoSection() {
         <div className="lg:w-1/2 relative">
           <div className="relative rounded-[40px] overflow-hidden">
             <Image 
-              src="/images/yacht.jpg" 
+              src="/images/video/video1.jpg" 
               alt="Яхта SALVADOR на море" 
               width={800}
               height={600}

src/app/components/YachtGrid.tsx

@@ -1,5 +1,13 @@
 import { Card, CardContent, CardHeader } 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 Image from "next/image";
 import Icon from "@/components/ui/icon";
 
@@ -7,7 +15,7 @@ const yachts = [
     {
         name: "Яхта",
         length: "12 метров",
-        price: "от 12 500 Р / час",
+        price: "от 12 500 ₽ / час",
         feet: "7 Футов",
         img: "/images/yacht.jpg",
         badge: "Быстрая бронь",
@@ -15,7 +23,7 @@ const yachts = [
     {
         name: "Яхта",
         length: "14 метров",
-        price: "от 26 400 Р / час",
+        price: "от 26 400 ₽ / час",
         feet: "7 Футов",
         img: "/images/yacht.jpg",
         badge: "По запросу",
@@ -23,7 +31,7 @@ const yachts = [
     {
         name: "Яхта",
         length: "22 метра",
-        price: "от 48 000 Р / час",
+        price: "от 48 000 ₽ / час",
         feet: "7 Футов",
         img: "/images/yacht.jpg",
         badge: "По запросу",
@@ -31,7 +39,7 @@ const yachts = [
     {
         name: "Яхта",
         length: "13.6 метров",
-        price: "от 17 400 Р / час",
+        price: "от 17 400 ₽ / час",
         feet: "7 Футов",
         img: "/images/yacht.jpg",
         badge: "По запросу",
@@ -39,7 +47,7 @@ const yachts = [
     {
         name: "Яхта",
         length: "13 метров",
-        price: "от 14 400 Р / час",
+        price: "от 14 400 ₽ / час",
         feet: "7 Футов",
         img: "/images/yacht.jpg",
         badge: "По запросу",
@@ -47,80 +55,208 @@ const yachts = [
     {
         name: "Яхта",
         length: "12 метров",
-        price: "от 12 480 Р / час",
+        price: "от 12 480 ₽ / час",
-        feet: "7 Футов",
-        img: "/images/yacht.jpg",
-        badge: "По запросу",
-    },
-    {
-        name: "Яхта",
-        length: "14 метров",
-        price: "от 18 000 Р / час",
-        feet: "7 Футов",
-        img: "/images/yacht.jpg",
-        badge: "По запросу",
-    },
-    {
-        name: "Яхта",
-        length: "19 метров",
-        price: "от 25 920 Р / час",
-        feet: "7 Футов",
-        img: "/images/yacht.jpg",
-        badge: "По запросу",
-    },
-    {
-        name: "Яхта",
-        length: "20 метров",
-        price: "от 32 400 Р / час",
-        feet: "7 Футов",
-        img: "/images/yacht.jpg",
-        badge: "По запросу",
-    },
-    {
-        name: "Яхта",
-        length: "8 метров",
-        price: "от 9 960 Р / час",
-        feet: "7 Футов",
-        img: "/images/yacht.jpg",
-        badge: "По запросу",
-    },
-    {
-        name: "Яхта",
-        length: "13 метров",
-        price: "от 18 000 Р / час",
-        feet: "7 Футов",
-        img: "/images/yacht.jpg",
-        badge: "По запросу",
-    },
-    {
-        name: "Яхта",
-        length: "11.58 метров",
-        price: "от 14 400 Р / час",
         feet: "7 Футов",
         img: "/images/yacht.jpg",
         badge: "По запросу",
     },
 ];
 
+const featuredYacht = {
+    name: "Яхта",
+    length: "12 метров",
+    price: "от 18 000 ₽",
+    perTime: "/ час",
+    feet: "7 Футов",
+    mainImage: "/images/yacht.jpg",
+    thumbnails: [
+        "/images/yacht.jpg",
+        "/images/another-yacht.jpg",
+        "/images/yacht.jpg",
+        "/images/another-yacht.jpg",
+        "/images/yacht.jpg",
+    ],
+    isPromoted: true,
+    totalPrice: "0 ₽",
+};
+
 export default function YachtGrid() {
     return (
-        <section className="min-h-screen text-white">
+        <section className="text-white">
             <div className="container max-w-6xl mx-auto px-4 mt-6 md:mt-12">
                 {/* Header Section */}
                 <div className="mb-6">
                     <h1 className="text-3xl md:text-4xl font-bold mb-4 text-black">
-                        Яхты в аренду
+                        Яхты и катера в аренду
                     </h1>
                     <h2 className="text-l text-black font-bold mb-2">
-                        Онлайн бронирование яхт
+                        Онлайн бронирование яхт и катеров
                     </h2>
                     <p className="text-gray-700 max-w-3xl leading-relaxed">
                         Каталог лучших яхт Балаклавы разных ценовых сегментах.
+                    </p>
+                    <p className="text-gray-700 leading-relaxed">
                         Проверенные лодки с лицензией на перевозки, опытные
                         капитаны. Выбирайте удобную дату, время и бронируйте.
                     </p>
                 </div>
 
+                {/* Featured Yacht Block */}
+                <div className="mb-10">
+                    <Card className="overflow-hidden bg-white text-gray-900 shadow-lg">
+                        <CardContent className="p-0">
+                            <div className="flex flex-col lg:flex-row gap-11 px-6 py-10">
+                                {/* Left side - Yacht details and images */}
+                                <div className="flex-1">
+                                    {/* Header with yacht name and length */}
+                                    <div className="flex items-center justify-between mb-6">
+                                        <h2 className="text-3xl font-bold">
+                                            {featuredYacht.name}
+                                        </h2>
+                                        <div className="flex items-center gap-2 text-gray-600">
+                                            <Icon size={16} name="width" />
+                                            <span className="text-lg">
+                                                {featuredYacht.length}
+                                            </span>
+                                        </div>
+                                    </div>
+
+                                    {/* Main yacht image */}
+                                    <div className="relative mb-6">
+                                        <Image
+                                            src={featuredYacht.mainImage}
+                                            alt={featuredYacht.name}
+                                            width={600}
+                                            height={400}
+                                            className="w-full h-80 object-cover rounded-lg"
+                                        />
+                                    </div>
+
+                                    {/* Thumbnail images */}
+                                    <div className="flex gap-3 mb-6 overflow-x-auto">
+                                        {featuredYacht.thumbnails.map(
+                                            (thumb, idx) => (
+                                                <div
+                                                    key={idx}
+                                                    className="relative flex-shrink-0"
+                                                >
+                                                    <Image
+                                                        src={thumb}
+                                                        alt={`${
+                                                            featuredYacht.name
+                                                        } view ${idx + 1}`}
+                                                        width={80}
+                                                        height={60}
+                                                        className={`w-20 h-16 object-cover rounded cursor-pointer border-2 transition-all ${
+                                                            idx === 0
+                                                                ? "border-blue-500"
+                                                                : "border-gray-200 hover:border-gray-400"
+                                                        }`}
+                                                    />
+                                                </div>
+                                            )
+                                        )}
+                                    </div>
+
+                                    {/* Promoted badge */}
+                                    {featuredYacht.isPromoted && (
+                                        <div className="flex items-center gap-2 text-sm text-gray-600">
+                                            <div className="w-3 h-3 bg-blue-500 rounded-full flex-shrink-0"></div>
+                                            <span>
+                                                Это объявление продвигается.{" "}
+                                                <span className="text-blue-500 underline cursor-pointer">
+                                                    Хотите так же?
+                                                </span>
+                                            </span>
+                                        </div>
+                                    )}
+                                </div>
+
+                                {/* Right side - Booking form */}
+                                <div className="min-w-[296px] flex flex-col justify-between">
+                                    <div>
+                                        {/* Promoted banner */}
+                                        <div
+                                            className="text-white flex items-center justify-center py-2 rounded-full text-center mb-6 relative"
+                                            style={{
+                                                backgroundImage:
+                                                    "url(/images/badge-bg.jpg)",
+                                                backgroundSize: "cover",
+                                                backgroundPosition: "center",
+                                                backgroundRepeat: "no-repeat",
+                                            }}
+                                        >
+                                            <span className="text-xs font-medium relative z-10">
+                                                Заметнее других — бронируют
+                                                быстрее
+                                            </span>
+                                        </div>
+
+                                        <div className="border rounded-[16px] p-6 pb-8 border-gray-200 pt-6">
+                                            {/* Price */}
+                                            <div className="mb-6">
+                                                <p className="text-3xl font-bold">
+                                                    {featuredYacht.price}
+                                                    <span className="text-sm font-normal text-gray-500">
+                                                        {featuredYacht.perTime}
+                                                    </span>
+                                                </p>
+                                            </div>
+
+                                            {/* Booking form */}
+                                            <div className="space-y-5 mb-8">
+                                                <div>
+                                                    <DatePicker />
+                                                </div>
+                                                <div>
+                                                    <DatePicker />
+                                                </div>
+                                                <div>
+                                                    <Select>
+                                                        <SelectTrigger className="w-full h-[64px]">
+                                                            <SelectValue placeholder="1 гость" />
+                                                        </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>
+                                                        </SelectContent>
+                                                    </Select>
+                                                </div>
+                                            </div>
+
+                                            {/* Book button */}
+                                            <Button className="w-full text-white py-4 text-lg font-bold mb-6 rounded-lg shadow-md">
+                                                Забронировать
+                                            </Button>
+
+                                            {/* Total price */}
+                                            <div className="flex justify-between items-center text-l font-bold text-gray-800">
+                                                <span className="font-normal">Итого:</span>
+                                                <span>
+                                                    {featuredYacht.totalPrice}
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </div>
+
                 {/* Yacht Grid */}
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
                     {yachts.map((yacht, idx) => (