iaiaiaia
/
travelmarine-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Sergey Bolshakov 2025-10-26 13:20:09 +03:00
parent 6a3148bd88
commit 3b2a71bace
19 changed files with 259 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/articles/article1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 123 KiB

BIN
public/images/articles/article2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
public/images/articles/article3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

BIN
public/images/badge-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
public/images/hero-bg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 424 KiB

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
public/images/reviews/review1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
public/images/reviews/review2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
public/images/reviews/review3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
public/images/reviews/review4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
public/images/reviews/review5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
public/images/reviews/review6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
public/images/reviews/review7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
public/images/reviews/review8.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
public/images/video/video1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

10
src/app/components/Articles.tsx
View File

@ -5,14 +5,14 @@ import Image from "next/image";
const articles = [
{
id: 1,
image: "/images/yacht.jpg",
image: "/images/articles/article1.jpg",
tags: ["Полезное", "Интересное"],
title: "Тема публикации",
description: "Текст публикации",
title: "Вейксерф в Балаклаве – испытай новые ощущения с сёрф-клубом «Рурайдер»!",
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" },

47
src/app/components/Hero.tsx
View File

@ -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>
<h2 className="text-5xl font-bold mb-4">в Балаклаве</h2>
<p className="text-ь text-white/90">
Подключись к морскому бризу вместе с Travel Marine
<h1 className="text-5xl font-bold mb-2">
Аренда яхт и катеров в Балаклаве
</h1>
<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">
<CardContent className="p-6">
<Card className="bg-white shadow-lg s hidden md:block rounded-full">
<CardContent className="p-2">
{/* Основные поля поиска */}
<div className="flex flex-col md:flex-row gap-4">
{/* Локация */}
@ -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>

87
src/app/components/Reviews.tsx
View File

@ -3,61 +3,80 @@ import Image from "next/image";
const reviewCategories = [
{
id: 1,
image: "/images/heart.png",
label: "Отзывы",
image: "/images/reviews/review1.jpg",
label: "ОТЗЫВЫ",
},
{
id: 2,
image: "/images/heart.png",
label: "Свидание",
image: "/images/reviews/review2.jpg",
label: "АКТИВНЫЙ ОТДЫХ",
},
{
id: 3,
image: "/images/heart.png",
label: "Закат",
image: "/images/reviews/review3.jpg",
label: "ЗАКАТ",
},
{
id: 4,
image: "/images/heart.png",
label: "С детьми",
image: "/images/reviews/review4.jpg",
label: "С ДЕТЬМИ",
},
{
id: 5,
image: "/images/heart.png",
label: "Вечеринка",
image: "/images/reviews/review5.jpg",
label: "ВЕЧЕРИНКА",
},
{
id: 6,
image: "/images/heart.png",
label: "Девичник",
image: "/images/reviews/review6.jpg",
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">
<h1 className="text-3xl md:text-4xl font-bold mb-4 md:mb-8 text-black">
Отзывы и истории аренд яхт
</h1>
<div className="flex gap-12 overflow-x-auto pb-4">
{reviewCategories.map((category) => (
<div
key={category.id}
className="flex-shrink-0 text-center cursor-pointer"
>
<div className="relative w-16 h-16 md:w-24 md:h-24 mx-auto mb-3">
<Image
src={category.image}
alt={category.label}
fill
className="rounded-full object-cover"
/>
<section className="mt-8 md:mt-12">
<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-6 flex-wrap">
{reviewCategories.map((category) => (
<div
key={category.id}
className="flex-1 min-w-28 cursor-pointer group"
>
<div className="relative w-full h-39 rounded-lg overflow-hidden">
<Image
src={category.image}
alt={category.label}
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}
</p>
</div>
))}
))}
</div>
</div>
</section>
);

2
src/app/components/VideoSection.tsx
View File

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

250
src/app/components/YachtGrid.tsx
View File

@ -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 Р / час",
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 Р / час",
price: "от 12 480 ₽ / час",
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) => (