Генеративная доработка компонентов главной страницы

package-lock.json

@@ -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",

package.json

@@ -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",

src/app/components/Advantages.tsx

@@ -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">
+        <section className="container mx-auto px-4 py-16">
-            <div className="md:w-1/2 pr-8">
+            {/* Заголовок секции */}
-                <h2 className="text-3xl font-bold mb-6">
+            <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">
+                <p className="text-lg text-gray-600">
-                    <li>Каждый пункт из макета...</li>
+                    Выбирайте яхту и наслаждайтесь, об остальном позаботились мы
-                    {/* Добавьте 3-4 пункта */}
+                </p>
-                </ol>
-                <Button className="mt-6 bg-primary">Выбрать яхту</Button>
             </div>
-            <div className="md:w-1/2 mt-8 md:mt-0">
+
+            <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="/advantages-bg.jpg"
+                            src="/images/yacht.jpg"
-                    alt="Яхта"
+                            alt="Яхта в Балаклаве"
                             width={600}
-                    height={400}
+                            height={800}
-                    className="rounded-lg"
+                            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>
     );

src/app/components/Articles.tsx

@@ -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) => (
+        {articles.map((article) => (
-          <Card key={idx}>
+          <Card key={article.id} className="overflow-hidden">
-            <CardHeader>
+            <div className="relative">
-              <Image src={article.img} alt={article.title} width={400} height={200} />
+              <Image 
-            </CardHeader>
+                src={article.image} 
-            <CardContent>
+                alt={article.title} 
-              <CardTitle>{article.title}</CardTitle>
+                width={400} 
-              <p>{article.desc}</p>
+                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>
         ))}

src/app/components/Hero.tsx

@@ -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="absolute inset-0 bg-black/40" />
-            {/* Оверлей для читаемости */}
+            
-            <div className="relative z-10">
+            <div className="relative z-10 w-full max-w-6xl mx-auto px-4">
-                <h1 className="text-5xl font-bold mb-4">
+                {/* Заголовок и подзаголовок */}
-                    Аренда яхт в Балканах
+                <div className="text-left mb-8">
+                    <h1 className="text-5xl font-bold mb-2">
+                        Аренда яхт
                     </h1>
-                <p className="text-2xl">Путешествуйте с Marine Travel</p>
+                    <h2 className="text-5xl font-bold mb-4">
-                <div className="mt-6 flex justify-center space-x-4">
+                        в Балаклаве
-                    {/* Поисковая форма: используйте shadcn input и button */}
+                    </h2>
-                    <input
+                    <p className="text-xl text-white/90">
-                        type="text"
+                        Подключись к морскому бризу вместе с Travel Marine
-                        placeholder="Каталог"
+                    </p>
-                        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>
+
+                {/* Поисковая форма */}
+                <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>
     );

src/app/components/Reviews.tsx

@@ -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>
+    );
+}

src/app/components/Services.tsx

@@ -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>
+                <div className="mb-8">
-        <p className="text-center mb-12">Описание преимуществ...</p>
+                    <h1 className="text-4xl font-bold mb-4 text-black">
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        Морские прогулки
-          <Image src="/service1.jpg" alt="Рыбалка" width={600} height={400} className="rounded-lg" />
+                    </h1>
-          <Image src="/service2.jpg" alt="Парусники" width={600} height={400} className="rounded-lg" />
+                    <h2 className="text-xl text-gray-600 mb-6">
-          {/* Добавьте больше по макету */}
+                        Организация &quot;под ключ&quot;
+                    </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>
-  )
+    );
 }

src/app/components/VideoSection.tsx

@@ -1,15 +1,42 @@
+import Image from 'next/image'
+
 export default function VideoSection() {
   return (
-    <section className="bg-background py-12">
+    <section className="bg-white py-16">
-      <div className="container mx-auto px-4 flex flex-col md:flex-row items-center">
+      <div className="container mx-auto px-4 flex flex-col lg:flex-row items-center gap-12">
-        <div className="md:w-1/2 pr-8">
+        {/* Левая колонка с текстом */}
-          <h2 className="text-3xl font-bold mb-6">Откройте мир морских прогулок</h2>
+        <div className="lg:w-1/2">
-          <p>Описание...</p>
+          <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="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 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>
       </div>
     </section>

src/app/components/YachtGrid.tsx

@@ -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">
+        <div className="min-h-screen text-white">
-            <h2 className="text-3xl font-bold mb-8 text-center">
+            <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>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <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">
+                        <Card key={idx} className="overflow-hidden bg-white text-gray-900 shadow-lg">
-                        <CardHeader className="p-0">
+                            <CardHeader className="p-0 relative">
+                                <div className="relative">
                                     <Image
                                         src={yacht.img}
                                         alt={yacht.name}
                                         width={400}
-                                height={300}
+                                        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>
+                            <CardContent className="p-4">
-                            <CardTitle>{yacht.name}</CardTitle>
+                                <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>
-                        <CardFooter>
-                            <p>{yacht.price}</p>
-                        </CardFooter>
                         </Card>
                     ))}
                 </div>
-        </section>
+
+                {/* 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>
+        </div>
     );
 }

src/app/page.tsx

@@ -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 />

src/components/layout/Footer.tsx

@@ -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">
+        <footer className="bg-white text-gray-500 border-t">
-            <div className="container mx-auto px-4 flex flex-col md:flex-row justify-between">
+            <div className="container mx-auto px-4 py-10">
-                <div>Marine Travel © 2024</div>
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-8 items-start">
-                <div className="space-x-4">
+                    {/* Brand + socials */}
-                    <a href="/contacts">Контакты</a>
+                    <div className="flex flex-col gap-4">
-                    <a href="/privacy">Политика конфиденциальности</a>
+                        <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>

src/components/layout/Header.tsx

@@ -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">
+        <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 flex justify-between items-center">
+            <div className="container mx-auto px-4 py-4">
-                <Link href="/">
+                <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>
+
-                    <NavigationMenuList className="space-x-6">
+                    {/* Десктопная навигация */}
-                        <NavigationMenuItem>
+                    <NavigationMenu className="hidden lg:flex">
-                            <NavigationMenuLink href="/catalog">
+                        <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>
-                        <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
+                    {/* Контакты и кнопка */}
+                    <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>
     );

src/components/ui/carousel.tsx

@@ -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,
+}