Доработки по вёрстке
This commit is contained in:
parent
0bf248ac64
commit
dcc4424165
|
|
@ -0,0 +1,9 @@
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<mask id="mask0_5_900" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="4" y="4" width="16" height="16">
|
||||||
|
<path d="M4 4H20V20H4V4Z" fill="white"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_5_900)">
|
||||||
|
<path d="M13.543 13.543C12.286 14.84 12.194 16.457 12.086 20C15.389 20 17.669 19.989 18.846 18.846C19.989 17.669 20 15.28 20 12.086C16.457 12.2 14.84 12.286 13.543 13.543ZM4 12.086C4 15.28 4.011 17.669 5.154 18.846C6.331 19.989 8.611 20 11.914 20C11.8 16.457 11.714 14.84 10.457 13.543C9.16 12.286 7.543 12.194 4 12.086ZM11.914 4C8.617 4 6.331 4.011 5.154 5.154C4.011 6.331 4 8.72 4 11.914C7.543 11.8 9.16 11.714 10.457 10.457C11.714 9.16 11.806 7.543 11.914 4ZM13.543 10.457C12.286 9.16 12.194 7.543 12.086 4C15.389 4 17.669 4.011 18.846 5.154C19.989 6.331 20 8.72 20 11.914C16.457 11.8 14.84 11.714 13.543 10.457Z" fill="#56C8DC"/>
|
||||||
|
<path d="M20 12.086V11.914C16.457 11.8 14.84 11.714 13.543 10.457C12.286 9.16 12.194 7.543 12.086 4H11.914C11.8 7.543 11.714 9.16 10.457 10.457C9.16 11.714 7.543 11.806 4 11.914V12.086C7.543 12.2 9.16 12.286 10.457 13.543C11.714 14.84 11.806 16.457 11.914 20H12.086C12.2 16.457 12.286 14.84 13.543 13.543C14.84 12.286 16.457 12.194 20 12.086Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,11 @@
|
||||||
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<mask id="mask0_5_2549" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
|
||||||
|
<path d="M32 0H0V32H32V0Z" fill="white"/>
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_5_2549)">
|
||||||
|
<path d="M20.3996 6.30336C18.7042 6.30336 17.1601 6.9504 16 8.01067C14.8399 6.9504 13.2958 6.30336 11.6005 6.30336C7.99768 6.30336 5.07715 9.22389 5.07715 12.8267C5.07715 14.9024 5.79843 16.6219 7.16376 18.2528C8.5291 19.8837 15.9958 25.6966 15.9958 25.6966C15.9958 25.6966 23.5087 19.9098 24.8438 18.2142C26.1274 16.5839 26.9229 14.915 26.9229 12.8267C26.9229 9.22389 24.0024 6.30336 20.3996 6.30336Z" fill="white"/>
|
||||||
|
<path d="M20.3996 6.30336C18.7042 6.30336 17.1601 6.9504 16 8.01067C14.8399 6.9504 13.2958 6.30336 11.6005 6.30336C7.99768 6.30336 5.07715 9.22389 5.07715 12.8267C5.07715 14.9024 5.79843 16.6219 7.16376 18.2528C8.5291 19.8837 15.9958 25.6966 15.9958 25.6966C15.9958 25.6966 23.5087 19.9098 24.8438 18.2142C26.1274 16.5839 26.9229 14.915 26.9229 12.8267C26.9229 9.22389 24.0024 6.30336 20.3996 6.30336Z" stroke="white" stroke-width="5.12"/>
|
||||||
|
<path d="M20.3996 6.30336C18.7042 6.30336 17.1601 6.9504 16 8.01067C14.8399 6.9504 13.2958 6.30336 11.6005 6.30336C7.99768 6.30336 5.07715 9.22389 5.07715 12.8267C5.07715 14.9024 5.79843 16.6219 7.16376 18.2528C8.5291 19.8837 15.9958 25.6966 15.9958 25.6966C15.9958 25.6966 23.5087 19.9098 24.8438 18.2142C26.1274 16.5839 26.9229 14.915 26.9229 12.8267C26.9229 9.22389 24.0024 6.30336 20.3996 6.30336Z" fill="white"/>
|
||||||
|
<path d="M20.3996 6.30336C18.7042 6.30336 17.1601 6.9504 16 8.01067C14.8399 6.9504 13.2958 6.30336 11.6005 6.30336C7.99768 6.30336 5.07715 9.22389 5.07715 12.8267C5.07715 14.9024 5.79843 16.6219 7.16376 18.2528C8.5291 19.8837 15.9958 25.6966 15.9958 25.6966C15.9958 25.6966 23.5087 19.9098 24.8438 18.2142C26.1274 16.5839 26.9229 14.915 26.9229 12.8267C26.9229 9.22389 24.0024 6.30336 20.3996 6.30336Z" stroke="#333333" stroke-width="1.70667"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M9.98492 3.65559C9.9523 3.56145 9.87262 3.49509 9.77831 3.48359L6.62569 3.10289L5.21584 0.145281C5.17339 0.0565467 5.08639 0 4.9924 0C4.89799 0 4.81131 0.0565467 4.76897 0.145281L3.35587 3.11006L0.212762 3.60882C0.119694 3.62345 0.0417088 3.69292 0.0124254 3.78738C-0.0170654 3.88186 0.00698325 3.98693 0.0734799 4.057L2.32336 6.42544L1.93293 9.7029C1.92122 9.80163 1.96346 9.89986 2.04146 9.95523C2.11967 10.0107 2.22172 10.015 2.3038 9.96616L5.05712 8.3287L7.79622 9.93431C7.87861 9.98251 7.98035 9.97764 8.05833 9.92166C8.13633 9.86568 8.17795 9.76717 8.16562 9.66873L7.75168 6.35764L9.93159 3.92777C9.99682 3.85486 10.0172 3.74978 9.98492 3.65559Z" fill="#008299"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 782 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.136 4.11008C19.3567 4.0128 19.6002 3.97905 19.839 4.01261C20.0779 4.04618 20.3026 4.14573 20.488 4.30008C20.677 4.45508 20.822 4.66008 20.909 4.89208C20.996 5.12508 21.021 5.37808 20.982 5.62508L18.951 18.4451C18.754 19.6811 17.45 20.3901 16.361 19.7741C15.448 19.2591 14.094 18.4641 12.876 17.6361C12.267 17.2221 10.402 15.8941 10.631 14.9491C10.828 14.1411 13.963 11.1051 15.754 9.29908C16.457 8.59108 16.136 8.18208 15.306 8.83408C13.243 10.4541 9.934 12.9161 8.84 13.6101C7.875 14.2211 7.371 14.3251 6.77 14.2211C5.671 14.0311 4.653 13.7361 3.822 13.3781C2.699 12.8931 2.754 11.2871 3.822 10.8181L19.136 4.11008Z" fill="#56C8DC"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 791 B |
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M22.57 16.767C22.57 16.685 22.488 16.685 22.488 16.603C22.159 15.945 21.42 15.123 20.433 14.219C19.94 13.809 19.693 13.479 19.529 13.315C19.283 12.986 19.283 12.74 19.365 12.411C19.447 12.164 19.775 11.753 20.351 11.014C20.68 10.603 20.844 10.356 21.091 10.11C22.324 8.466 22.899 7.397 22.735 6.904L22.653 6.822C22.57 6.74 22.488 6.658 22.323 6.658C22.159 6.575 21.913 6.575 21.666 6.658H17.968L17.885 6.74C17.803 6.822 17.803 6.822 17.803 6.904C17.474 7.808 17.063 8.548 16.653 9.37C16.406 9.78 16.159 10.192 15.913 10.52C15.666 10.85 15.502 11.096 15.337 11.26C15.173 11.425 15.009 11.507 14.927 11.671C14.844 11.753 14.68 11.836 14.68 11.753C14.598 11.753 14.515 11.753 14.515 11.671L14.269 11.425C14.187 11.342 14.187 11.178 14.104 11.014V6.904C14.104 6.822 14.022 6.658 14.022 6.575L13.776 6.329C13.694 6.247 13.529 6.247 13.447 6.164C12.9605 6.05952 12.4646 6.00458 11.967 6C10.652 6 9.748 6.082 9.42 6.247C9.255 6.329 9.09 6.411 9.009 6.575C8.844 6.74 8.844 6.822 8.926 6.822C9.337 6.904 9.666 7.068 9.831 7.315L9.913 7.479C9.995 7.562 9.995 7.726 10.077 7.973C10.159 8.219 10.159 8.466 10.159 8.795V10.11C10.159 10.52 10.077 10.767 10.077 11.014C10.077 11.26 9.995 11.424 9.913 11.507C9.831 11.671 9.831 11.753 9.748 11.753C9.748 11.753 9.748 11.836 9.666 11.836C9.584 11.836 9.502 11.918 9.337 11.918C9.255 11.918 9.091 11.836 9.009 11.753C8.83411 11.6605 8.69095 11.5177 8.598 11.343C8.433 11.178 8.268 10.931 8.104 10.603C7.94 10.274 7.694 9.945 7.529 9.452L7.365 9.123C7.283 8.959 7.118 8.63 6.954 8.219C6.789 7.809 6.625 7.479 6.461 7.069C6.3995 6.94485 6.31579 6.833 6.214 6.739H6.132C6.132 6.739 6.05 6.658 5.968 6.658C5.885 6.658 5.803 6.575 5.721 6.575H2.762C2.433 6.575 2.269 6.658 2.187 6.74L2.104 6.822V6.986C2.104 7.068 2.104 7.151 2.187 7.316C2.597 8.301 3.091 9.288 3.584 10.274C4.077 11.178 4.57 12 4.899 12.575C5.31 13.151 5.639 13.726 6.049 14.219C6.461 14.712 6.707 15.041 6.789 15.206L7.119 15.534L7.365 15.781C7.529 15.945 7.775 16.191 8.105 16.438C8.433 16.685 8.845 16.932 9.255 17.178C9.666 17.425 10.159 17.589 10.652 17.753C11.228 17.918 11.721 18 12.214 17.918H13.447C13.694 17.918 13.857 17.836 14.022 17.671L14.104 17.589C14.104 17.507 14.187 17.507 14.187 17.425V17.095C14.187 16.767 14.187 16.521 14.269 16.274C14.351 16.027 14.351 15.863 14.433 15.699C14.515 15.534 14.598 15.452 14.68 15.369L14.844 15.206H14.926C15.091 15.123 15.337 15.206 15.502 15.37C15.748 15.534 15.995 15.78 16.159 16.027C16.324 16.274 16.57 16.521 16.899 16.849C17.228 17.179 17.474 17.425 17.639 17.507L17.885 17.671C18.05 17.753 18.215 17.836 18.461 17.918C18.707 18 18.871 18 19.036 18L21.83 17.918C22.077 17.918 22.324 17.836 22.488 17.753C22.653 17.671 22.735 17.589 22.735 17.425V17.095C22.57 16.932 22.57 16.849 22.57 16.767Z" fill="#56C8DC"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -1,31 +1,32 @@
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import { Icon } from "../../components/ui/icon";
|
||||||
|
|
||||||
export default function Advantages() {
|
export default function Advantages() {
|
||||||
return (
|
return (
|
||||||
<section className="container max-w-6xl mx-auto px-4 py-16">
|
<section className="container max-w-6xl mx-auto px-4 mt-8 md:mt-12">
|
||||||
{/* Заголовок секции */}
|
{/* Заголовок секции */}
|
||||||
<div className="text-center mb-12">
|
<div className="text-center mb-12 max-w-[600px] mx-auto">
|
||||||
<h2 className="text-4xl font-bold text-gray-800 mb-4">
|
<h2 className="text-3xl md:text-4xl font-bold mb-6">
|
||||||
Аренда яхт и организация морских прогулок в Балаклаве
|
Аренда яхт и организация морских прогулок в Балаклаве
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-gray-600">
|
<p className="text-lg">
|
||||||
Выбирайте яхту и наслаждайтесь, об остальном позаботились мы
|
Выбирайте яхту и наслаждайтесь, об остальном позаботились мы
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col justify-between lg:flex-row gap-12">
|
<div className="flex flex-col justify-between lg:flex-row gap-12">
|
||||||
{/* Левая колонка с тремя секциями */}
|
{/* Левая колонка с тремя секциями */}
|
||||||
<div className="lg:w-2/5 space-y-8">
|
<div className="lg:w-2/5 space-y-9">
|
||||||
{/* Секция 01 */}
|
{/* Секция 01 */}
|
||||||
<div>
|
<div>
|
||||||
<div className="w-12 h-8 border border-blue-200 rounded-full flex items-center justify-center mb-4">
|
<div className="w-12 h-8 border border-brand rounded-full flex items-center justify-center mb-4">
|
||||||
<span className=" font-semibold text-lg">01</span>
|
<span className="text-m">01</span>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-gray-800 mb-3 text-left">
|
<h3 className="text-xl font-bold mb-5">
|
||||||
Каталог лучших яхт Балаклавы в разных ценовых
|
Каталог лучших яхт Балаклавы в разных ценовых
|
||||||
сегментах
|
сегментах
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-gray-600 leading-relaxed text-left">
|
<p className="text-gray-600 leading-relaxed">
|
||||||
Проверенные лодки с лицензией на перевозки, надежные
|
Проверенные лодки с лицензией на перевозки, надежные
|
||||||
судовладельцы, опытные капитаны. В нашем каталоге вы
|
судовладельцы, опытные капитаны. В нашем каталоге вы
|
||||||
найдете катера, парусники, катамараны с фото,
|
найдете катера, парусники, катамараны с фото,
|
||||||
|
|
@ -35,13 +36,13 @@ export default function Advantages() {
|
||||||
|
|
||||||
{/* Секция 02 */}
|
{/* Секция 02 */}
|
||||||
<div>
|
<div>
|
||||||
<div className="w-12 h-8 border border-blue-200 rounded-full flex items-center justify-center mb-4">
|
<div className="w-12 h-8 border border-brand rounded-full flex items-center justify-center mb-4">
|
||||||
<span className=" font-semibold text-lg">02</span>
|
<span className="text-m">02</span>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-gray-800 mb-3 text-left">
|
<h3 className="text-xl font-bold mb-5">
|
||||||
Удобное самостоятельное бронирование яхты в аренду
|
Удобное самостоятельное бронирование яхты в аренду
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-gray-600 leading-relaxed text-left">
|
<p className="text-gray-600 leading-relaxed">
|
||||||
Вы можете самостоятельно выбрать яхту на ваш вкус,
|
Вы можете самостоятельно выбрать яхту на ваш вкус,
|
||||||
взять любимую еду и напитки, поставить свой
|
взять любимую еду и напитки, поставить свой
|
||||||
плей-лист. На борту есть все для комфортного
|
плей-лист. На борту есть все для комфортного
|
||||||
|
|
@ -52,13 +53,13 @@ export default function Advantages() {
|
||||||
|
|
||||||
{/* Секция 03 */}
|
{/* Секция 03 */}
|
||||||
<div>
|
<div>
|
||||||
<div className="w-12 h-8 border border-blue-200 rounded-full flex items-center justify-center mb-4">
|
<div className="w-12 h-8 border border-brand rounded-full flex items-center justify-center mb-4">
|
||||||
<span className=" font-semibold text-lg">03</span>
|
<span className="text-m">03</span>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-gray-800 mb-3 text-left">
|
<h3 className="text-xl font-bold mb-5">
|
||||||
Организация морских прогулок под ключ
|
Организация морских прогулок под ключ
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-gray-600 leading-relaxed text-left">
|
<p className="text-gray-600 leading-relaxed">
|
||||||
Вы можете связаться с нами, и наш менеджер поможет
|
Вы можете связаться с нами, и наш менеджер поможет
|
||||||
вам подобрать яхту, а также организовать праздник на
|
вам подобрать яхту, а также организовать праздник на
|
||||||
борту: шампанское и фрукты, кейтеринг по меню,
|
борту: шампанское и фрукты, кейтеринг по меню,
|
||||||
|
|
@ -68,7 +69,7 @@ export default function Advantages() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Правая колонка с изображением и оверлейными карточками */}
|
{/* Правая колонка с изображением и оверлейными карточками */}
|
||||||
<div className=" relative">
|
<div className="relative hidden lg:block">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Image
|
<Image
|
||||||
src="/images/advantage.png"
|
src="/images/advantage.png"
|
||||||
|
|
@ -79,14 +80,14 @@ export default function Advantages() {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Оверлейные карточки */}
|
{/* Оверлейные карточки */}
|
||||||
<div className="absolute top-16 left-[-100px] border bg-white rounded-full w-[300px] p-2 shadow-lg">
|
<div className="absolute top-16 left-[-100px] border bg-white rounded-full w-[334px] py-2 px-3">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<Image
|
<Image
|
||||||
src="/images/another-yacht.jpg"
|
src="/images/another-yacht.jpg"
|
||||||
alt="Яхта"
|
alt="Яхта"
|
||||||
width={40}
|
width={62}
|
||||||
height={40}
|
height={62}
|
||||||
className="rounded-full h-[40px] w-[40px] object-fill"
|
className="rounded-full h-[62px] w-[62px] object-fill"
|
||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
<p className="font-medium text-gray-800">
|
<p className="font-medium text-gray-800">
|
||||||
|
|
@ -94,12 +95,12 @@ export default function Advantages() {
|
||||||
</p>
|
</p>
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
{[...Array(5)].map((_, i) => (
|
{[...Array(5)].map((_, i) => (
|
||||||
<span
|
<Icon
|
||||||
key={i}
|
key={i}
|
||||||
|
name="star"
|
||||||
|
size={10}
|
||||||
className="text-yellow-400"
|
className="text-yellow-400"
|
||||||
>
|
/>
|
||||||
★
|
|
||||||
</span>
|
|
||||||
))}
|
))}
|
||||||
<span className="text-sm text-gray-600">
|
<span className="text-sm text-gray-600">
|
||||||
124
|
124
|
||||||
|
|
@ -109,14 +110,14 @@ export default function Advantages() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="absolute top-1/2 right-[-100px] border bg-white rounded-full w-[300px] p-2 shadow-lg">
|
<div className="absolute top-1/2 right-[-100px] border bg-white rounded-full w-[334px] py-2 px-3 hidden xl:block">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<Image
|
<Image
|
||||||
src="/images/another-yacht.jpg"
|
src="/images/another-yacht.jpg"
|
||||||
alt="Яхта"
|
alt="Яхта"
|
||||||
width={40}
|
width={62}
|
||||||
height={40}
|
height={62}
|
||||||
className="rounded-full h-[40px] w-[40px] object-fill"
|
className="rounded-full h-[62px] w-[62px] object-fill"
|
||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
<p className="font-medium text-gray-800">
|
<p className="font-medium text-gray-800">
|
||||||
|
|
@ -124,12 +125,12 @@ export default function Advantages() {
|
||||||
</p>
|
</p>
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
{[...Array(5)].map((_, i) => (
|
{[...Array(5)].map((_, i) => (
|
||||||
<span
|
<Icon
|
||||||
key={i}
|
key={i}
|
||||||
|
name="star"
|
||||||
|
size={10}
|
||||||
className="text-yellow-400"
|
className="text-yellow-400"
|
||||||
>
|
/>
|
||||||
★
|
|
||||||
</span>
|
|
||||||
))}
|
))}
|
||||||
<span className="text-sm text-gray-600">
|
<span className="text-sm text-gray-600">
|
||||||
124
|
124
|
||||||
|
|
@ -139,14 +140,14 @@ export default function Advantages() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="absolute bottom-8 left-8 border bg-white rounded-full w-[300px] p-2 shadow-lg">
|
<div className="absolute bottom-8 left-8 border bg-white rounded-full w-[334px] py-2 px-3">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<Image
|
<Image
|
||||||
src="/images/another-yacht.jpg"
|
src="/images/another-yacht.jpg"
|
||||||
alt="Яхта"
|
alt="Яхта"
|
||||||
width={40}
|
width={62}
|
||||||
height={40}
|
height={62}
|
||||||
className="rounded-full h-[40px] w-[40px] object-fill"
|
className="rounded-full h-[62px] w-[62px] object-fill"
|
||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
<p className="font-medium text-gray-800">
|
<p className="font-medium text-gray-800">
|
||||||
|
|
@ -154,12 +155,12 @@ export default function Advantages() {
|
||||||
</p>
|
</p>
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
{[...Array(5)].map((_, i) => (
|
{[...Array(5)].map((_, i) => (
|
||||||
<span
|
<Icon
|
||||||
key={i}
|
key={i}
|
||||||
|
name="star"
|
||||||
|
size={10}
|
||||||
className="text-yellow-400"
|
className="text-yellow-400"
|
||||||
>
|
/>
|
||||||
★
|
|
||||||
</span>
|
|
||||||
))}
|
))}
|
||||||
<span className="text-sm text-gray-600">
|
<span className="text-sm text-gray-600">
|
||||||
124
|
124
|
||||||
|
|
|
||||||
|
|
@ -1,82 +1,87 @@
|
||||||
import { Card, CardContent } from '@/components/ui/card'
|
import { Card } from "@/components/ui/card";
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from "@/components/ui/button";
|
||||||
import Image from 'next/image'
|
import Image from "next/image";
|
||||||
|
|
||||||
const articles = [
|
const articles = [
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
image: '/images/yacht.jpg',
|
image: "/images/yacht.jpg",
|
||||||
tags: ['Полезное', 'Интересное'],
|
tags: ["Полезное", "Интересное"],
|
||||||
title: 'Тема публикации',
|
title: "Тема публикации",
|
||||||
description: 'Текст публикации'
|
description: "Текст публикации",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
image: '/images/yacht.jpg',
|
image: "/images/yacht.jpg",
|
||||||
tags: ['Полезное', 'Интересное'],
|
tags: ["Полезное", "Интересное"],
|
||||||
title: 'В чем отличия яхты, катера и лодки?',
|
title: "В чем отличия яхты, катера и лодки?",
|
||||||
description: 'Гайд по выбору судна для морской прогулки. Что арендовать в Балаклаве',
|
description:
|
||||||
hasButton: true
|
"Гайд по выбору судна для морской прогулки. Что арендовать в Балаклаве",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
image: '/images/yacht.jpg',
|
image: "/images/yacht.jpg",
|
||||||
tags: [
|
tags: [
|
||||||
{ text: 'Дзен', icon: 'D' },
|
{ text: "Дзен", icon: "D" },
|
||||||
{ text: 'VK', icon: 'VK' }
|
{ text: "VK", icon: "VK" },
|
||||||
],
|
],
|
||||||
title: 'Подпишись на наши группы в социальных сетях',
|
title: "Подпишись на наши группы в социальных сетях",
|
||||||
description: 'Чтобы не пропустить новый контент. Открой новое в мире морских прогулок'
|
description:
|
||||||
}
|
"Чтобы не пропустить новый контент. Открой новое в мире морских прогулок",
|
||||||
]
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default function Articles() {
|
export default function Articles() {
|
||||||
return (
|
return (
|
||||||
<section className="container max-w-6xl mx-auto px-4 py-12">
|
<section className="container max-w-6xl mx-auto px-4 py-12">
|
||||||
<h2 className="text-3xl font-bold mb-8 text-left">Полезные статьи</h2>
|
<h2 className="text-3xl md:text-4xl font-bold mb-8 text-left">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
Полезные статьи
|
||||||
{articles.map((article) => (
|
</h2>
|
||||||
<Card key={article.id} className="overflow-hidden">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
|
||||||
<div className="relative">
|
{articles.map((article) => (
|
||||||
<Image
|
<div key={article.id} className="space-y-4">
|
||||||
src={article.image}
|
<Card className="overflow-hidden rounded-[24px]">
|
||||||
alt={article.title}
|
<div className="relative">
|
||||||
width={400}
|
<Image
|
||||||
height={200}
|
src={article.image}
|
||||||
className="w-full h-48 object-cover"
|
alt={article.title}
|
||||||
/>
|
width={400}
|
||||||
</div>
|
height={200}
|
||||||
<CardContent className="p-6">
|
className="w-full h-48 object-cover"
|
||||||
<div className="flex gap-2 mb-3">
|
/>
|
||||||
{article.tags.map((tag, idx) => (
|
</div>
|
||||||
<span
|
</Card>
|
||||||
key={idx}
|
<div className="space-y-3">
|
||||||
className="px-2 py-1 text-xs border border-gray-300 rounded text-gray-700"
|
<div className="flex gap-2">
|
||||||
>
|
{article.tags.map((tag, idx) => (
|
||||||
{typeof tag === 'string' ? tag : tag.text}
|
<span
|
||||||
</span>
|
key={idx}
|
||||||
|
className="px-3 py-2 text-xs border border-gray-300 rounded-[8px] text-gray-700 font-bold"
|
||||||
|
>
|
||||||
|
{typeof tag === "string"
|
||||||
|
? tag
|
||||||
|
: tag.text}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-bold text-gray-800">
|
||||||
|
{article.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-600">
|
||||||
|
{article.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-lg font-bold text-gray-800 mb-2">
|
<div className="text-center">
|
||||||
{article.title}
|
<Button
|
||||||
</h3>
|
size="lg"
|
||||||
<p className="text-sm text-gray-600 mb-4">
|
className="bg-white text-gray-900 hover:bg-gray-100 px-8 py-3 h-[56px] w-[336px] text-lg font-bold"
|
||||||
{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>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</section>
|
||||||
</CardContent>
|
);
|
||||||
</Card>
|
}
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@ 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="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-left">
|
<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">Аренда яхт</h1>
|
||||||
<h2 className="text-5xl font-bold mb-4">в Балаклаве</h2>
|
<h2 className="text-5xl font-bold mb-4">в Балаклаве</h2>
|
||||||
<p className="text-ь text-white/90">
|
<p className="text-ь text-white/90">
|
||||||
|
|
@ -39,22 +39,29 @@ export default function Hero() {
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Поисковая форма */}
|
{/* Кнопка для мобильных устройств */}
|
||||||
<Card className="bg-white shadow-lg s">
|
<div className="md:hidden flex justify-center">
|
||||||
|
<Button className="bg-brand hover:bg-teal-700 font-bold text-white h-[64px] px-8 text-lg w-full">
|
||||||
|
Выберите яхту
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Поисковая форма - скрыта на мобильных устройствах */}
|
||||||
|
<Card className="bg-white shadow-lg s hidden md:block">
|
||||||
<CardContent className="p-6">
|
<CardContent className="p-6">
|
||||||
{/* Основные поля поиска */}
|
{/* Основные поля поиска */}
|
||||||
<div className="flex flex-col md:flex-row gap-4 mb-4">
|
<div className="flex flex-col md:flex-row gap-4">
|
||||||
{/* Локация */}
|
{/* Локация */}
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<Select
|
<Select
|
||||||
value={location}
|
value={location}
|
||||||
onValueChange={setLocation}
|
onValueChange={setLocation}
|
||||||
>
|
>
|
||||||
<SelectTrigger className="w-full h-12 px-4">
|
<SelectTrigger className="w-full h-[64px] px-4">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<Icon
|
<Icon
|
||||||
name="map"
|
name="map"
|
||||||
className="w-5 h-5 text-teal-600 mr-3"
|
className="w-5 h-5 text-brand mr-3"
|
||||||
/>
|
/>
|
||||||
<SelectValue placeholder="Выберите локацию" />
|
<SelectValue placeholder="Выберите локацию" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -90,11 +97,11 @@ export default function Hero() {
|
||||||
value={guests}
|
value={guests}
|
||||||
onValueChange={setGuests}
|
onValueChange={setGuests}
|
||||||
>
|
>
|
||||||
<SelectTrigger className="w-full h-12 px-4">
|
<SelectTrigger className="w-full h-[64px] px-4">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<Icon
|
<Icon
|
||||||
name="people"
|
name="people"
|
||||||
className="w-5 h-5 text-teal-600 mr-3"
|
className="w-5 h-5 text-brand mr-3"
|
||||||
/>
|
/>
|
||||||
<SelectValue placeholder="Сколько гостей?" />
|
<SelectValue placeholder="Сколько гостей?" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -135,37 +142,41 @@ export default function Hero() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Кнопка поиска */}
|
{/* Кнопка поиска */}
|
||||||
<Button className="bg-teal-600 hover:bg-teal-700 text-white h-12 px-8">
|
<Button className="bg-brand hover:bg-teal-700 font-bold text-white h-[64px] w-[176px] px-8">
|
||||||
Найти
|
Найти
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Фильтры */}
|
{/* Фильтры */}
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="hidden lg:flex flex flex-wrap gap-2 mt-4">
|
||||||
<Button variant="outline" className="h-10">
|
<Button variant="outline" className="h-[34px]">
|
||||||
<Icon
|
<Icon
|
||||||
|
size={30}
|
||||||
name="money"
|
name="money"
|
||||||
className="w-4 h-4 text-teal-600 mr-2"
|
className="w-4 h-4 text-brand mr-2"
|
||||||
/>
|
/>
|
||||||
Бюджетные
|
Бюджетные
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" className="h-10">
|
<Button variant="outline" className="h-[34px]">
|
||||||
<Icon
|
<Icon
|
||||||
|
size={30}
|
||||||
name="money"
|
name="money"
|
||||||
className="w-4 h-4 text-teal-600 mr-2"
|
className="w-4 h-4 text-brand mr-2"
|
||||||
/>
|
/>
|
||||||
Ближайшие
|
Ближайшие
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" className="h-10">
|
<Button variant="outline" className="h-[34px]">
|
||||||
<Icon
|
<Icon
|
||||||
|
size={30}
|
||||||
name="money"
|
name="money"
|
||||||
className="w-4 h-4 text-teal-600 mr-2"
|
className="w-4 h-4 text-brand mr-2"
|
||||||
/>
|
/>
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant="outline" className="h-10">
|
<Button variant="outline" className="h-[34px]">
|
||||||
<Icon
|
<Icon
|
||||||
|
size={30}
|
||||||
name="money"
|
name="money"
|
||||||
className="w-4 h-4 text-teal-600 mr-2"
|
className="w-4 h-4 text-brand mr-2"
|
||||||
/>
|
/>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -35,8 +35,8 @@ const reviewCategories = [
|
||||||
|
|
||||||
export default function Reviews() {
|
export default function Reviews() {
|
||||||
return (
|
return (
|
||||||
<section className="container mx-auto max-w-6xl px-4 py-12">
|
<section className="container mx-auto max-w-6xl px-4 mt-8 md:mt-12">
|
||||||
<h1 className="text-4xl font-bold mb-4 text-black">
|
<h1 className="text-3xl md:text-4xl font-bold mb-4 md:mb-8 text-black">
|
||||||
Отзывы и истории аренд яхт
|
Отзывы и истории аренд яхт
|
||||||
</h1>
|
</h1>
|
||||||
<div className="flex gap-12 overflow-x-auto pb-4">
|
<div className="flex gap-12 overflow-x-auto pb-4">
|
||||||
|
|
@ -45,7 +45,7 @@ export default function Reviews() {
|
||||||
key={category.id}
|
key={category.id}
|
||||||
className="flex-shrink-0 text-center cursor-pointer"
|
className="flex-shrink-0 text-center cursor-pointer"
|
||||||
>
|
>
|
||||||
<div className="relative w-24 h-24 mx-auto mb-3">
|
<div className="relative w-16 h-16 md:w-24 md:h-24 mx-auto mb-3">
|
||||||
<Image
|
<Image
|
||||||
src={category.image}
|
src={category.image}
|
||||||
alt={category.label}
|
alt={category.label}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { Heart } from "lucide-react";
|
|
||||||
import {
|
import {
|
||||||
Carousel,
|
Carousel,
|
||||||
CarouselContent,
|
CarouselContent,
|
||||||
|
|
@ -11,16 +10,17 @@ import {
|
||||||
} from "@/components/ui/carousel";
|
} from "@/components/ui/carousel";
|
||||||
import { Card } from "@/components/ui/card";
|
import { Card } from "@/components/ui/card";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
|
import Icon from "@/components/ui/icon";
|
||||||
|
|
||||||
export default function Services() {
|
export default function Services() {
|
||||||
return (
|
return (
|
||||||
<section className="bg-background py-12">
|
<section className="bg-background mt-8 md:mt-12">
|
||||||
<div className="container max-w-6xl mx-auto px-4">
|
<div className="container max-w-6xl mx-auto px-4">
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<h1 className="text-4xl font-bold mb-4 text-black">
|
<h1 className="text-3xl md:text-4xl font-bold mb-4 text-black">
|
||||||
Морские прогулки
|
Морские прогулки
|
||||||
</h1>
|
</h1>
|
||||||
<h2 className="text-xl text-gray-600 mb-6">
|
<h2 className="text-l text-black font-bold mb-2">
|
||||||
Организация "под ключ"
|
Организация "под ключ"
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-gray-700 max-w-3xl leading-relaxed">
|
<p className="text-gray-700 max-w-3xl leading-relaxed">
|
||||||
|
|
@ -33,125 +33,173 @@ export default function Services() {
|
||||||
|
|
||||||
{/* Два высоких карусели в одном ряду */}
|
{/* Два высоких карусели в одном ряду */}
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
||||||
<Carousel className="w-full">
|
<div className="space-y-4">
|
||||||
<CarouselContent>
|
<div className="relative">
|
||||||
<CarouselItem>
|
<Carousel className="w-full">
|
||||||
<div className="relative group">
|
<CarouselContent>
|
||||||
<Image
|
<CarouselItem>
|
||||||
src="/images/rod.png"
|
<div className="relative group">
|
||||||
alt="Морская рыбалка в Балаклаве"
|
<Image
|
||||||
width={600}
|
src="/images/rod.png"
|
||||||
height={500}
|
alt="Морская рыбалка в Балаклаве"
|
||||||
className="w-full h-[500px] object-cover rounded-lg"
|
width={600}
|
||||||
/>
|
height={500}
|
||||||
<div className="absolute top-4 right-4">
|
className="w-full h-[500px] object-cover rounded-lg"
|
||||||
<Heart className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors" />
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute bottom-4 left-4 text-white">
|
</CarouselItem>
|
||||||
<h3 className="text-xl font-semibold">
|
<CarouselItem>
|
||||||
Морская рыбалка в Балаклаве
|
<div className="relative group">
|
||||||
</h3>
|
<Image
|
||||||
</div>
|
src="/images/rod.png"
|
||||||
</div>
|
alt="Морская рыбалка в Балаклаве"
|
||||||
</CarouselItem>
|
width={600}
|
||||||
</CarouselContent>
|
height={500}
|
||||||
<CarouselPrevious className="left-4" />
|
className="w-full h-[500px] object-cover rounded-lg"
|
||||||
<CarouselNext className="right-4" />
|
/>
|
||||||
</Carousel>
|
</div>
|
||||||
|
</CarouselItem>
|
||||||
|
</CarouselContent>
|
||||||
|
<CarouselPrevious className="left-4" />
|
||||||
|
<CarouselNext className="right-4" />
|
||||||
|
</Carousel>
|
||||||
|
<div className="absolute top-4 right-4 z-10">
|
||||||
|
<Icon
|
||||||
|
name="like"
|
||||||
|
size={32}
|
||||||
|
className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-2">
|
||||||
|
<h3 className="text-l font-semibold text-black">
|
||||||
|
Морская рыбалка в Балаклаве
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Carousel className="w-full">
|
<div className="space-y-4">
|
||||||
<CarouselContent>
|
<div className="relative">
|
||||||
<CarouselItem>
|
<Carousel className="w-full">
|
||||||
<div className="relative group">
|
<CarouselContent>
|
||||||
<Image
|
<CarouselItem>
|
||||||
src="/images/rod.png"
|
<div className="relative group">
|
||||||
alt="Прогулка на парусной яхте"
|
<Image
|
||||||
width={600}
|
src="/images/rod.png"
|
||||||
height={500}
|
alt="Прогулка на парусной яхте"
|
||||||
className="w-full h-[500px] object-cover rounded-lg"
|
width={600}
|
||||||
/>
|
height={500}
|
||||||
<div className="absolute top-4 right-4">
|
className="w-full h-[500px] object-cover rounded-lg"
|
||||||
<Heart className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors" />
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="absolute bottom-4 left-4 text-white">
|
</CarouselItem>
|
||||||
<h3 className="text-xl font-semibold">
|
</CarouselContent>
|
||||||
Прогулка на парусной яхте
|
<CarouselPrevious className="left-4" />
|
||||||
</h3>
|
<CarouselNext className="right-4" />
|
||||||
</div>
|
</Carousel>
|
||||||
</div>
|
<div className="absolute top-4 right-4 z-10">
|
||||||
</CarouselItem>
|
<Icon
|
||||||
</CarouselContent>
|
name="like"
|
||||||
<CarouselPrevious className="left-4" />
|
size={32}
|
||||||
<CarouselNext className="right-4" />
|
className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors"
|
||||||
</Carousel>
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-2">
|
||||||
|
<h3 className="text-l font-semibold text-black">
|
||||||
|
Прогулка на парусной яхте
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Три маленьких карточки на всю ширину */}
|
{/* Три маленьких карточки на всю ширину */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||||
<Card className="overflow-hidden">
|
<div className="space-y-4">
|
||||||
<div className="relative group">
|
<Card className="overflow-hidden">
|
||||||
<Image
|
<div className="relative group">
|
||||||
src="/images/rod.png"
|
<Image
|
||||||
alt="Вечеринка на яхте"
|
src="/images/rod.png"
|
||||||
width={400}
|
alt="Вечеринка на яхте"
|
||||||
height={300}
|
width={400}
|
||||||
className="w-full h-[300px] object-cover"
|
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 className="absolute top-4 right-4">
|
||||||
</div>
|
<Icon
|
||||||
<div className="absolute bottom-4 left-4 text-white">
|
name="like"
|
||||||
<h3 className="text-lg font-semibold">
|
size={32}
|
||||||
Вечеринка на яхте
|
className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors"
|
||||||
</h3>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</Card>
|
||||||
|
<div className="px-2">
|
||||||
|
<h3 className="text-l font-semibold text-black">
|
||||||
|
Вечеринка на яхте
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</div>
|
||||||
|
|
||||||
<Card className="overflow-hidden">
|
<div className="space-y-4">
|
||||||
<div className="relative group">
|
<Card className="overflow-hidden">
|
||||||
<Image
|
<div className="relative group">
|
||||||
src="/images/rod.png"
|
<Image
|
||||||
alt="Корпоративная прогулка на яхте"
|
src="/images/rod.png"
|
||||||
width={400}
|
alt="Корпоративная прогулка на яхте"
|
||||||
height={300}
|
width={400}
|
||||||
className="w-full h-[300px] object-cover"
|
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 className="absolute top-4 right-4">
|
||||||
</div>
|
<Icon
|
||||||
<div className="absolute bottom-4 left-4 text-white">
|
name="like"
|
||||||
<h3 className="text-lg font-semibold">
|
size={32}
|
||||||
Корпоративная прогулка на яхте
|
className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors"
|
||||||
</h3>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</Card>
|
||||||
|
<div className="px-2">
|
||||||
|
<h3 className="text-l font-semibold text-black">
|
||||||
|
Корпоративная прогулка на яхте
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</div>
|
||||||
|
|
||||||
<Card className="overflow-hidden">
|
<div className="space-y-4">
|
||||||
<div className="relative group">
|
<Card className="overflow-hidden">
|
||||||
<Image
|
<div className="relative group">
|
||||||
src="/images/rod.png"
|
<Image
|
||||||
alt="Морские прогулки на яхте"
|
src="/images/rod.png"
|
||||||
width={400}
|
alt="Морские прогулки на яхте"
|
||||||
height={300}
|
width={400}
|
||||||
className="w-full h-[300px] object-cover"
|
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 className="absolute top-4 right-4">
|
||||||
</div>
|
<Icon
|
||||||
<div className="absolute bottom-4 left-4 text-white">
|
name="like"
|
||||||
<h3 className="text-lg font-semibold">
|
size={32}
|
||||||
Морские прогулки на яхте в Бал...
|
className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors"
|
||||||
</h3>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</Card>
|
||||||
|
<div className="px-2">
|
||||||
|
<h3 className="text-l font-semibold text-black">
|
||||||
|
Морские прогулки на яхте в Бал...
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Кнопка */}
|
{/* Кнопка */}
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<Button size="lg" className="px-8 py-3">
|
<Button
|
||||||
|
size="lg"
|
||||||
|
className="bg-white text-gray-900 hover:bg-gray-100 px-8 py-3 h-[56px] w-[336px] text-lg font-bold"
|
||||||
|
>
|
||||||
Все морские прогулки
|
Все морские прогулки
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ export default function VideoSection() {
|
||||||
<div className="container max-w-6xl mx-auto px-4 flex flex-col lg:flex-row items-center gap-12">
|
<div className="container max-w-6xl mx-auto px-4 flex flex-col lg:flex-row items-center gap-12">
|
||||||
{/* Левая колонка с текстом */}
|
{/* Левая колонка с текстом */}
|
||||||
<div className="lg:w-1/2">
|
<div className="lg:w-1/2">
|
||||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6 leading-tight">
|
<h2 className="text-3xl font-bold text-gray-900 mb-6 leading-tight">
|
||||||
Откройте мир морских прогулок
|
Откройте мир морских прогулок
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg text-gray-700 leading-relaxed">
|
<p className="text-lg text-gray-700 leading-relaxed">
|
||||||
|
|
@ -16,7 +16,7 @@ export default function VideoSection() {
|
||||||
|
|
||||||
{/* Правая колонка с изображением */}
|
{/* Правая колонка с изображением */}
|
||||||
<div className="lg:w-1/2 relative">
|
<div className="lg:w-1/2 relative">
|
||||||
<div className="relative rounded-2xl overflow-hidden shadow-2xl">
|
<div className="relative rounded-[40px] overflow-hidden">
|
||||||
<Image
|
<Image
|
||||||
src="/images/yacht.jpg"
|
src="/images/yacht.jpg"
|
||||||
alt="Яхта SALVADOR на море"
|
alt="Яхта SALVADOR на море"
|
||||||
|
|
@ -24,18 +24,6 @@ export default function VideoSection() {
|
||||||
height={600}
|
height={600}
|
||||||
className="w-full h-auto"
|
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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,6 @@ const yachts = [
|
||||||
feet: "7 Футов",
|
feet: "7 Футов",
|
||||||
img: "/images/yacht.jpg",
|
img: "/images/yacht.jpg",
|
||||||
badge: "Быстрая бронь",
|
badge: "Быстрая бронь",
|
||||||
badgeIcon: "⚡",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Яхта",
|
name: "Яхта",
|
||||||
|
|
@ -20,7 +19,6 @@ const yachts = [
|
||||||
feet: "7 Футов",
|
feet: "7 Футов",
|
||||||
img: "/images/yacht.jpg",
|
img: "/images/yacht.jpg",
|
||||||
badge: "По запросу",
|
badge: "По запросу",
|
||||||
badgeIcon: "🔄",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Яхта",
|
name: "Яхта",
|
||||||
|
|
@ -29,7 +27,6 @@ const yachts = [
|
||||||
feet: "7 Футов",
|
feet: "7 Футов",
|
||||||
img: "/images/yacht.jpg",
|
img: "/images/yacht.jpg",
|
||||||
badge: "По запросу",
|
badge: "По запросу",
|
||||||
badgeIcon: "🔄",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Яхта",
|
name: "Яхта",
|
||||||
|
|
@ -38,7 +35,6 @@ const yachts = [
|
||||||
feet: "7 Футов",
|
feet: "7 Футов",
|
||||||
img: "/images/yacht.jpg",
|
img: "/images/yacht.jpg",
|
||||||
badge: "По запросу",
|
badge: "По запросу",
|
||||||
badgeIcon: "🔄",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Яхта",
|
name: "Яхта",
|
||||||
|
|
@ -47,7 +43,6 @@ const yachts = [
|
||||||
feet: "7 Футов",
|
feet: "7 Футов",
|
||||||
img: "/images/yacht.jpg",
|
img: "/images/yacht.jpg",
|
||||||
badge: "По запросу",
|
badge: "По запросу",
|
||||||
badgeIcon: "🔄",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Яхта",
|
name: "Яхта",
|
||||||
|
|
@ -56,7 +51,6 @@ const yachts = [
|
||||||
feet: "7 Футов",
|
feet: "7 Футов",
|
||||||
img: "/images/yacht.jpg",
|
img: "/images/yacht.jpg",
|
||||||
badge: "По запросу",
|
badge: "По запросу",
|
||||||
badgeIcon: "🔄",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Яхта",
|
name: "Яхта",
|
||||||
|
|
@ -65,7 +59,6 @@ const yachts = [
|
||||||
feet: "7 Футов",
|
feet: "7 Футов",
|
||||||
img: "/images/yacht.jpg",
|
img: "/images/yacht.jpg",
|
||||||
badge: "По запросу",
|
badge: "По запросу",
|
||||||
badgeIcon: "🔄",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Яхта",
|
name: "Яхта",
|
||||||
|
|
@ -74,7 +67,6 @@ const yachts = [
|
||||||
feet: "7 Футов",
|
feet: "7 Футов",
|
||||||
img: "/images/yacht.jpg",
|
img: "/images/yacht.jpg",
|
||||||
badge: "По запросу",
|
badge: "По запросу",
|
||||||
badgeIcon: "🔄",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Яхта",
|
name: "Яхта",
|
||||||
|
|
@ -83,7 +75,6 @@ const yachts = [
|
||||||
feet: "7 Футов",
|
feet: "7 Футов",
|
||||||
img: "/images/yacht.jpg",
|
img: "/images/yacht.jpg",
|
||||||
badge: "По запросу",
|
badge: "По запросу",
|
||||||
badgeIcon: "🔄",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Яхта",
|
name: "Яхта",
|
||||||
|
|
@ -92,7 +83,6 @@ const yachts = [
|
||||||
feet: "7 Футов",
|
feet: "7 Футов",
|
||||||
img: "/images/yacht.jpg",
|
img: "/images/yacht.jpg",
|
||||||
badge: "По запросу",
|
badge: "По запросу",
|
||||||
badgeIcon: "🔄",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Яхта",
|
name: "Яхта",
|
||||||
|
|
@ -101,7 +91,6 @@ const yachts = [
|
||||||
feet: "7 Футов",
|
feet: "7 Футов",
|
||||||
img: "/images/yacht.jpg",
|
img: "/images/yacht.jpg",
|
||||||
badge: "По запросу",
|
badge: "По запросу",
|
||||||
badgeIcon: "🔄",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Яхта",
|
name: "Яхта",
|
||||||
|
|
@ -110,20 +99,19 @@ const yachts = [
|
||||||
feet: "7 Футов",
|
feet: "7 Футов",
|
||||||
img: "/images/yacht.jpg",
|
img: "/images/yacht.jpg",
|
||||||
badge: "По запросу",
|
badge: "По запросу",
|
||||||
badgeIcon: "🔄",
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export default function YachtGrid() {
|
export default function YachtGrid() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen text-white">
|
<section className="min-h-screen text-white">
|
||||||
<div className="container max-w-6xl mx-auto px-4 py-12">
|
<div className="container max-w-6xl mx-auto px-4 mt-6 md:mt-12">
|
||||||
{/* Header Section */}
|
{/* Header Section */}
|
||||||
<div className="mb-12">
|
<div className="mb-6">
|
||||||
<h1 className="text-4xl font-bold mb-4 text-black">
|
<h1 className="text-3xl md:text-4xl font-bold mb-4 text-black">
|
||||||
Яхты в аренду
|
Яхты в аренду
|
||||||
</h1>
|
</h1>
|
||||||
<h2 className="text-xl text-gray-600 mb-6">
|
<h2 className="text-l text-black font-bold mb-2">
|
||||||
Онлайн бронирование яхт
|
Онлайн бронирование яхт
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-gray-700 max-w-3xl leading-relaxed">
|
<p className="text-gray-700 max-w-3xl leading-relaxed">
|
||||||
|
|
@ -134,11 +122,11 @@ export default function YachtGrid() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Yacht Grid */}
|
{/* Yacht Grid */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
|
||||||
{yachts.map((yacht, idx) => (
|
{yachts.map((yacht, idx) => (
|
||||||
<Card
|
<Card
|
||||||
key={idx}
|
key={idx}
|
||||||
className="overflow-hidden bg-white text-gray-900 shadow-lg"
|
className="overflow-hidden bg-white text-gray-900"
|
||||||
>
|
>
|
||||||
<CardHeader className="p-0 relative">
|
<CardHeader className="p-0 relative">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
|
|
@ -151,7 +139,7 @@ export default function YachtGrid() {
|
||||||
/>
|
/>
|
||||||
{/* Badge Overlay */}
|
{/* Badge Overlay */}
|
||||||
<div className="absolute top-3 left-3">
|
<div className="absolute top-3 left-3">
|
||||||
<div className="flex items-center justify-center bg-black bg-opacity-10 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-1">
|
<div className="flex items-center justify-center bg-black/40 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-1">
|
||||||
<Icon
|
<Icon
|
||||||
size={16}
|
size={16}
|
||||||
name={
|
name={
|
||||||
|
|
@ -166,29 +154,21 @@ export default function YachtGrid() {
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="p-4">
|
<CardContent className="p-4">
|
||||||
<div className="flex justify-between items-start mb-2">
|
<div className="flex justify-between items-start mb-1">
|
||||||
<h3 className="font-bold text-lg">
|
<h3 className="font-bold text-l">
|
||||||
{yacht.name}
|
{yacht.name}
|
||||||
</h3>
|
</h3>
|
||||||
<div className="text-right">
|
<div className="text-right">
|
||||||
<p className="font-bold text-lg">
|
<p className="text-l">{yacht.price}</p>
|
||||||
{yacht.price}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between text-gray-600">
|
<div className="flex items-center justify-between text-gray-600">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-1">
|
||||||
<Icon
|
<Icon size={16} name="width" />
|
||||||
size={16}
|
|
||||||
name="width"
|
|
||||||
/>
|
|
||||||
<span>{yacht.length}</span>
|
<span>{yacht.length}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-1">
|
||||||
<Icon
|
<Icon size={16} name="anchor" />
|
||||||
size={16}
|
|
||||||
name="anchor"
|
|
||||||
/>
|
|
||||||
<span>{yacht.feet}</span>
|
<span>{yacht.feet}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -201,12 +181,12 @@ export default function YachtGrid() {
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<Button
|
<Button
|
||||||
size="lg"
|
size="lg"
|
||||||
className="bg-white text-gray-900 hover:bg-gray-100 px-8 py-3 text-lg font-medium"
|
className="bg-white text-gray-900 hover:bg-gray-100 px-8 py-3 h-[56px] w-[336px] text-lg font-bold"
|
||||||
>
|
>
|
||||||
Каталог яхт
|
Каталог яхт
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -42,6 +42,7 @@
|
||||||
--color-popover: var(--popover);
|
--color-popover: var(--popover);
|
||||||
--color-card-foreground: var(--card-foreground);
|
--color-card-foreground: var(--card-foreground);
|
||||||
--color-card: var(--card);
|
--color-card: var(--card);
|
||||||
|
--color-brand: var(--brand);
|
||||||
--radius-sm: calc(var(--radius) - 4px);
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
--radius-md: calc(var(--radius) - 2px);
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
--radius-lg: var(--radius);
|
--radius-lg: var(--radius);
|
||||||
|
|
@ -81,6 +82,7 @@
|
||||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||||
--sidebar-border: oklch(0.922 0 0);
|
--sidebar-border: oklch(0.922 0 0);
|
||||||
--sidebar-ring: oklch(0.708 0 0);
|
--sidebar-ring: oklch(0.708 0 0);
|
||||||
|
--brand: oklch(0.5588 0.0992 215.93);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
|
|
@ -118,10 +120,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
* {
|
* {
|
||||||
@apply border-border outline-ring/50;
|
@apply border-border outline-ring/50;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,12 @@
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
import Icon from "../ui/icon";
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer className="bg-white text-gray-500 border-t">
|
<footer className="bg-white text-gray-500 border-t">
|
||||||
<div className="container mx-auto px-4 py-10">
|
<div className="max-w-[1120px] mx-auto px-4 py-10">
|
||||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 items-start">
|
<div className="flex flex-col md:flex-row gap-8 items-start justify-between">
|
||||||
{/* Brand + socials */}
|
{/* Brand + socials */}
|
||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
|
|
@ -18,27 +19,27 @@ export default function Footer() {
|
||||||
/>
|
/>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-4 text-teal-500">
|
<div className="flex items-center gap-4 text-brand">
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
aria-label="VK"
|
aria-label="VK"
|
||||||
className="hover:opacity-80"
|
className="hover:opacity-80"
|
||||||
>
|
>
|
||||||
vk
|
<Icon name="vk" size={24} />
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
aria-label="Telegram"
|
aria-label="Telegram"
|
||||||
className="hover:opacity-80"
|
className="hover:opacity-80"
|
||||||
>
|
>
|
||||||
tg
|
<Icon name="dzen" size={24} />
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
aria-label="YouTube"
|
aria-label="YouTube"
|
||||||
className="hover:opacity-80"
|
className="hover:opacity-80"
|
||||||
>
|
>
|
||||||
yt
|
<Icon name="tg" size={24} />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -101,7 +102,11 @@ export default function Footer() {
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-12 flex justify-end text-sm text-gray-400">
|
<div className="mt-12 flex justify-between text-sm text-gray-400">
|
||||||
|
<div>
|
||||||
|
<div>© 2025 Travel Marine</div>
|
||||||
|
<div>Все права защищены</div>
|
||||||
|
</div>
|
||||||
<span>Сделано в Inavate</span>
|
<span>Сделано в Inavate</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,14 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import {
|
|
||||||
NavigationMenu,
|
|
||||||
NavigationMenuItem,
|
|
||||||
NavigationMenuLink,
|
|
||||||
NavigationMenuList,
|
|
||||||
} from "@/components/ui/navigation-menu";
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Menu, X, Phone } from "lucide-react";
|
import { Menu, X, User } from "lucide-react";
|
||||||
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||||
|
|
||||||
const navigationItems = [
|
|
||||||
{ href: "/catalog", label: "Каталог" },
|
|
||||||
{ href: "/yachts", label: "Яхты" },
|
|
||||||
{ href: "/services", label: "Услуги" },
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100">
|
<header className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100">
|
||||||
<div className="w-full max-w-6xl mx-auto">
|
<div className="w-full max-w-6xl mx-auto">
|
||||||
|
|
@ -36,71 +24,40 @@ export default function Header() {
|
||||||
/>
|
/>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{/* Десктопная навигация */}
|
|
||||||
<NavigationMenu className="hidden lg:flex">
|
|
||||||
<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>
|
|
||||||
))}
|
|
||||||
</NavigationMenuList>
|
|
||||||
</NavigationMenu>
|
|
||||||
|
|
||||||
{/* Контакты и кнопка */}
|
{/* Контакты и кнопка */}
|
||||||
<div className="hidden lg:flex items-center space-x-4">
|
<div className="flex items-center space-x-4">
|
||||||
|
{/* Номер телефона - видимый на всех экранах */}
|
||||||
<div className="flex items-center space-x-2 text-gray-700">
|
<div className="flex items-center space-x-2 text-gray-700">
|
||||||
<Phone className="h-4 w-4" />
|
<span className="text-sm sm:text-base">
|
||||||
<span className="font-semibold">
|
|
||||||
+7 (978) 744-89-00
|
+7 (978) 744-89-00
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<Button className="bg-primary hover:bg-primary/90 text-white">
|
|
||||||
Заказать звонок
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Мобильное меню */}
|
{/* Кнопка мобильного меню */}
|
||||||
<div className="lg:hidden">
|
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
setIsMobileMenuOpen(!isMobileMenuOpen)
|
setIsMobileMenuOpen(!isMobileMenuOpen)
|
||||||
}
|
}
|
||||||
className="text-gray-700"
|
className="text-gray-700 w-[100px] h-[48px] border"
|
||||||
>
|
>
|
||||||
{isMobileMenuOpen ? (
|
{isMobileMenuOpen ? (
|
||||||
<X className="h-6 w-6" />
|
<X className="!h-[24px] !w-[24px]" />
|
||||||
) : (
|
) : (
|
||||||
<Menu className="h-6 w-6" />
|
<Menu className="!h-[24px] !w-[24px]" />
|
||||||
)}
|
)}
|
||||||
|
<User className="!h-[24px] !w-[24px] text-brand" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Мобильное меню */}
|
{/* Мобильное меню */}
|
||||||
{isMobileMenuOpen && (
|
{/* {isMobileMenuOpen && (
|
||||||
<div className="lg:hidden mt-4 pb-4 border-t border-gray-100">
|
<div className="lg:hidden mt-4 pb-4 border-t border-gray-100">
|
||||||
<nav className="flex flex-col space-y-4 pt-4">
|
<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="pt-4 border-t border-gray-100">
|
||||||
<div className="flex items-center space-x-2 text-gray-700 mb-4">
|
<div className="flex items-center space-x-2 text-gray-700 mb-4">
|
||||||
<Phone className="h-4 w-4" />
|
|
||||||
<span className="font-semibold">
|
<span className="font-semibold">
|
||||||
+7 (123) 456-78-90
|
+7 (123) 456-78-90
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -111,7 +68,7 @@ export default function Header() {
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)} */}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -5,18 +5,18 @@ import { cva, type VariantProps } from "class-variance-authority"
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const buttonVariants = cva(
|
const buttonVariants = cva(
|
||||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
"inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default:
|
default:
|
||||||
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
"bg-primary text-primary-foreground border hover:bg-primary/90",
|
||||||
destructive:
|
destructive:
|
||||||
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
"bg-destructive text-destructive-foreground border hover:bg-destructive/90",
|
||||||
outline:
|
outline:
|
||||||
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
"border border-input bg-background border hover:bg-accent hover:text-accent-foreground",
|
||||||
secondary:
|
secondary:
|
||||||
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
"bg-secondary text-secondary-foreground border hover:bg-secondary/80",
|
||||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||||
link: "text-primary underline-offset-4 hover:underline",
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,7 @@ import {
|
||||||
ChevronRightIcon,
|
ChevronRightIcon,
|
||||||
} from "lucide-react"
|
} from "lucide-react"
|
||||||
import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
|
import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
|
||||||
|
import { ru } from "date-fns/locale"
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils"
|
||||||
import { Button, buttonVariants } from "@/components/ui/button"
|
import { Button, buttonVariants } from "@/components/ui/button"
|
||||||
|
|
@ -27,9 +28,10 @@ function Calendar({
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DayPicker
|
<DayPicker
|
||||||
|
locale={ru}
|
||||||
showOutsideDays={showOutsideDays}
|
showOutsideDays={showOutsideDays}
|
||||||
className={cn(
|
className={cn(
|
||||||
"bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
|
"bg-background group/calendar p-4 [--cell-size:2.5rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
|
||||||
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
||||||
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
||||||
className
|
className
|
||||||
|
|
@ -37,16 +39,17 @@ function Calendar({
|
||||||
captionLayout={captionLayout}
|
captionLayout={captionLayout}
|
||||||
formatters={{
|
formatters={{
|
||||||
formatMonthDropdown: (date) =>
|
formatMonthDropdown: (date) =>
|
||||||
date.toLocaleString("default", { month: "short" }),
|
date.toLocaleString("ru", { month: "short" }),
|
||||||
...formatters,
|
...formatters,
|
||||||
|
|
||||||
}}
|
}}
|
||||||
classNames={{
|
classNames={{
|
||||||
root: cn("w-fit", defaultClassNames.root),
|
root: cn("w-fit", defaultClassNames.root),
|
||||||
months: cn(
|
months: cn(
|
||||||
"relative flex flex-col gap-4 md:flex-row",
|
"relative flex flex-col gap-6 md:flex-row",
|
||||||
defaultClassNames.months
|
defaultClassNames.months
|
||||||
),
|
),
|
||||||
month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
|
month: cn("flex w-full flex-col gap-6", defaultClassNames.month),
|
||||||
nav: cn(
|
nav: cn(
|
||||||
"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
|
"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
|
||||||
defaultClassNames.nav
|
defaultClassNames.nav
|
||||||
|
|
@ -87,10 +90,10 @@ function Calendar({
|
||||||
table: "w-full border-collapse",
|
table: "w-full border-collapse",
|
||||||
weekdays: cn("flex", defaultClassNames.weekdays),
|
weekdays: cn("flex", defaultClassNames.weekdays),
|
||||||
weekday: cn(
|
weekday: cn(
|
||||||
"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
|
"text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal p-2",
|
||||||
defaultClassNames.weekday
|
defaultClassNames.weekday
|
||||||
),
|
),
|
||||||
week: cn("mt-2 flex w-full", defaultClassNames.week),
|
week: cn("mt-3 flex w-full", defaultClassNames.week),
|
||||||
week_number_header: cn(
|
week_number_header: cn(
|
||||||
"w-[--cell-size] select-none",
|
"w-[--cell-size] select-none",
|
||||||
defaultClassNames.week_number_header
|
defaultClassNames.week_number_header
|
||||||
|
|
@ -100,7 +103,7 @@ function Calendar({
|
||||||
defaultClassNames.week_number
|
defaultClassNames.week_number
|
||||||
),
|
),
|
||||||
day: cn(
|
day: cn(
|
||||||
"group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
|
"group/day relative aspect-square h-full w-full select-none p-1 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
|
||||||
defaultClassNames.day
|
defaultClassNames.day
|
||||||
),
|
),
|
||||||
range_start: cn(
|
range_start: cn(
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ const Card = React.forwardRef<
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"rounded-xl border bg-card text-card-foreground shadow",
|
"rounded-xl border bg-card text-card-foreground",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|
|
||||||
|
|
@ -1,262 +1,263 @@
|
||||||
"use client"
|
"use client";
|
||||||
|
|
||||||
import * as React from "react"
|
import * as React from "react";
|
||||||
import useEmblaCarousel, {
|
import useEmblaCarousel, {
|
||||||
type UseEmblaCarouselType,
|
type UseEmblaCarouselType,
|
||||||
} from "embla-carousel-react"
|
} from "embla-carousel-react";
|
||||||
import { ArrowLeft, ArrowRight } from "lucide-react"
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from "@/lib/utils";
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
type CarouselApi = UseEmblaCarouselType[1]
|
type CarouselApi = UseEmblaCarouselType[1];
|
||||||
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
|
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
||||||
type CarouselOptions = UseCarouselParameters[0]
|
type CarouselOptions = UseCarouselParameters[0];
|
||||||
type CarouselPlugin = UseCarouselParameters[1]
|
type CarouselPlugin = UseCarouselParameters[1];
|
||||||
|
|
||||||
type CarouselProps = {
|
type CarouselProps = {
|
||||||
opts?: CarouselOptions
|
opts?: CarouselOptions;
|
||||||
plugins?: CarouselPlugin
|
plugins?: CarouselPlugin;
|
||||||
orientation?: "horizontal" | "vertical"
|
orientation?: "horizontal" | "vertical";
|
||||||
setApi?: (api: CarouselApi) => void
|
setApi?: (api: CarouselApi) => void;
|
||||||
}
|
};
|
||||||
|
|
||||||
type CarouselContextProps = {
|
type CarouselContextProps = {
|
||||||
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
|
carouselRef: ReturnType<typeof useEmblaCarousel>[0];
|
||||||
api: ReturnType<typeof useEmblaCarousel>[1]
|
api: ReturnType<typeof useEmblaCarousel>[1];
|
||||||
scrollPrev: () => void
|
scrollPrev: () => void;
|
||||||
scrollNext: () => void
|
scrollNext: () => void;
|
||||||
canScrollPrev: boolean
|
canScrollPrev: boolean;
|
||||||
canScrollNext: boolean
|
canScrollNext: boolean;
|
||||||
} & CarouselProps
|
} & CarouselProps;
|
||||||
|
|
||||||
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
|
const CarouselContext = React.createContext<CarouselContextProps | null>(null);
|
||||||
|
|
||||||
function useCarousel() {
|
function useCarousel() {
|
||||||
const context = React.useContext(CarouselContext)
|
const context = React.useContext(CarouselContext);
|
||||||
|
|
||||||
if (!context) {
|
if (!context) {
|
||||||
throw new Error("useCarousel must be used within a <Carousel />")
|
throw new Error("useCarousel must be used within a <Carousel />");
|
||||||
}
|
}
|
||||||
|
|
||||||
return context
|
return context;
|
||||||
}
|
}
|
||||||
|
|
||||||
const Carousel = React.forwardRef<
|
const Carousel = React.forwardRef<
|
||||||
HTMLDivElement,
|
HTMLDivElement,
|
||||||
React.HTMLAttributes<HTMLDivElement> & CarouselProps
|
React.HTMLAttributes<HTMLDivElement> & CarouselProps
|
||||||
>(
|
>(
|
||||||
(
|
(
|
||||||
{
|
{
|
||||||
orientation = "horizontal",
|
orientation = "horizontal",
|
||||||
opts,
|
opts,
|
||||||
setApi,
|
setApi,
|
||||||
plugins,
|
plugins,
|
||||||
className,
|
className,
|
||||||
children,
|
children,
|
||||||
...props
|
...props
|
||||||
},
|
},
|
||||||
ref
|
ref
|
||||||
) => {
|
) => {
|
||||||
const [carouselRef, api] = useEmblaCarousel(
|
const [carouselRef, api] = useEmblaCarousel(
|
||||||
{
|
{
|
||||||
...opts,
|
...opts,
|
||||||
axis: orientation === "horizontal" ? "x" : "y",
|
axis: orientation === "horizontal" ? "x" : "y",
|
||||||
},
|
},
|
||||||
plugins
|
plugins
|
||||||
)
|
);
|
||||||
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
|
const [canScrollPrev, setCanScrollPrev] = React.useState(false);
|
||||||
const [canScrollNext, setCanScrollNext] = React.useState(false)
|
const [canScrollNext, setCanScrollNext] = React.useState(false);
|
||||||
|
|
||||||
const onSelect = React.useCallback((api: CarouselApi) => {
|
const onSelect = React.useCallback((api: CarouselApi) => {
|
||||||
if (!api) {
|
if (!api) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setCanScrollPrev(api.canScrollPrev())
|
setCanScrollPrev(api.canScrollPrev());
|
||||||
setCanScrollNext(api.canScrollNext())
|
setCanScrollNext(api.canScrollNext());
|
||||||
}, [])
|
}, []);
|
||||||
|
|
||||||
const scrollPrev = React.useCallback(() => {
|
const scrollPrev = React.useCallback(() => {
|
||||||
api?.scrollPrev()
|
api?.scrollPrev();
|
||||||
}, [api])
|
}, [api]);
|
||||||
|
|
||||||
const scrollNext = React.useCallback(() => {
|
const scrollNext = React.useCallback(() => {
|
||||||
api?.scrollNext()
|
api?.scrollNext();
|
||||||
}, [api])
|
}, [api]);
|
||||||
|
|
||||||
const handleKeyDown = React.useCallback(
|
const handleKeyDown = React.useCallback(
|
||||||
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||||
if (event.key === "ArrowLeft") {
|
if (event.key === "ArrowLeft") {
|
||||||
event.preventDefault()
|
event.preventDefault();
|
||||||
scrollPrev()
|
scrollPrev();
|
||||||
} else if (event.key === "ArrowRight") {
|
} else if (event.key === "ArrowRight") {
|
||||||
event.preventDefault()
|
event.preventDefault();
|
||||||
scrollNext()
|
scrollNext();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[scrollPrev, scrollNext]
|
[scrollPrev, scrollNext]
|
||||||
)
|
);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (!api || !setApi) {
|
if (!api || !setApi) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setApi(api)
|
setApi(api);
|
||||||
}, [api, setApi])
|
}, [api, setApi]);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
if (!api) {
|
if (!api) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
onSelect(api)
|
onSelect(api);
|
||||||
api.on("reInit", onSelect)
|
api.on("reInit", onSelect);
|
||||||
api.on("select", onSelect)
|
api.on("select", onSelect);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
api?.off("select", onSelect)
|
api?.off("select", onSelect);
|
||||||
}
|
};
|
||||||
}, [api, onSelect])
|
}, [api, onSelect]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CarouselContext.Provider
|
<CarouselContext.Provider
|
||||||
value={{
|
value={{
|
||||||
carouselRef,
|
carouselRef,
|
||||||
api: api,
|
api: api,
|
||||||
opts,
|
opts,
|
||||||
orientation:
|
orientation:
|
||||||
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
orientation ||
|
||||||
scrollPrev,
|
(opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||||
scrollNext,
|
scrollPrev,
|
||||||
canScrollPrev,
|
scrollNext,
|
||||||
canScrollNext,
|
canScrollPrev,
|
||||||
}}
|
canScrollNext,
|
||||||
>
|
}}
|
||||||
<div
|
>
|
||||||
ref={ref}
|
<div
|
||||||
onKeyDownCapture={handleKeyDown}
|
ref={ref}
|
||||||
className={cn("relative", className)}
|
onKeyDownCapture={handleKeyDown}
|
||||||
role="region"
|
className={cn("relative", className)}
|
||||||
aria-roledescription="carousel"
|
role="region"
|
||||||
{...props}
|
aria-roledescription="carousel"
|
||||||
>
|
{...props}
|
||||||
{children}
|
>
|
||||||
</div>
|
{children}
|
||||||
</CarouselContext.Provider>
|
</div>
|
||||||
)
|
</CarouselContext.Provider>
|
||||||
}
|
);
|
||||||
)
|
}
|
||||||
Carousel.displayName = "Carousel"
|
);
|
||||||
|
Carousel.displayName = "Carousel";
|
||||||
|
|
||||||
const CarouselContent = React.forwardRef<
|
const CarouselContent = React.forwardRef<
|
||||||
HTMLDivElement,
|
HTMLDivElement,
|
||||||
React.HTMLAttributes<HTMLDivElement>
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
>(({ className, ...props }, ref) => {
|
>(({ className, ...props }, ref) => {
|
||||||
const { carouselRef, orientation } = useCarousel()
|
const { carouselRef, orientation } = useCarousel();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div ref={carouselRef} className="overflow-hidden">
|
<div ref={carouselRef} className="overflow-hidden">
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex",
|
"flex",
|
||||||
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
})
|
});
|
||||||
CarouselContent.displayName = "CarouselContent"
|
CarouselContent.displayName = "CarouselContent";
|
||||||
|
|
||||||
const CarouselItem = React.forwardRef<
|
const CarouselItem = React.forwardRef<
|
||||||
HTMLDivElement,
|
HTMLDivElement,
|
||||||
React.HTMLAttributes<HTMLDivElement>
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
>(({ className, ...props }, ref) => {
|
>(({ className, ...props }, ref) => {
|
||||||
const { orientation } = useCarousel()
|
const { orientation } = useCarousel();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
ref={ref}
|
||||||
role="group"
|
role="group"
|
||||||
aria-roledescription="slide"
|
aria-roledescription="slide"
|
||||||
className={cn(
|
className={cn(
|
||||||
"min-w-0 shrink-0 grow-0 basis-full",
|
"min-w-0 shrink-0 grow-0 basis-full",
|
||||||
orientation === "horizontal" ? "pl-4" : "pt-4",
|
orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
);
|
||||||
})
|
});
|
||||||
CarouselItem.displayName = "CarouselItem"
|
CarouselItem.displayName = "CarouselItem";
|
||||||
|
|
||||||
const CarouselPrevious = React.forwardRef<
|
const CarouselPrevious = React.forwardRef<
|
||||||
HTMLButtonElement,
|
HTMLButtonElement,
|
||||||
React.ComponentProps<typeof Button>
|
React.ComponentProps<typeof Button>
|
||||||
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
||||||
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
ref={ref}
|
ref={ref}
|
||||||
variant={variant}
|
variant={variant}
|
||||||
size={size}
|
size={size}
|
||||||
className={cn(
|
className={cn(
|
||||||
"absolute h-8 w-8 rounded-full",
|
"absolute h-8 w-8 rounded-full",
|
||||||
orientation === "horizontal"
|
orientation === "horizontal"
|
||||||
? "-left-12 top-1/2 -translate-y-1/2"
|
? "-left-12 top-1/2 -translate-y-1/2"
|
||||||
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
disabled={!canScrollPrev}
|
disabled={!canScrollPrev}
|
||||||
onClick={scrollPrev}
|
onClick={scrollPrev}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<ArrowLeft className="h-4 w-4" />
|
<ChevronLeft className="h-4 w-4" />
|
||||||
<span className="sr-only">Previous slide</span>
|
<span className="sr-only">Previous slide</span>
|
||||||
</Button>
|
</Button>
|
||||||
)
|
);
|
||||||
})
|
});
|
||||||
CarouselPrevious.displayName = "CarouselPrevious"
|
CarouselPrevious.displayName = "CarouselPrevious";
|
||||||
|
|
||||||
const CarouselNext = React.forwardRef<
|
const CarouselNext = React.forwardRef<
|
||||||
HTMLButtonElement,
|
HTMLButtonElement,
|
||||||
React.ComponentProps<typeof Button>
|
React.ComponentProps<typeof Button>
|
||||||
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
||||||
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
ref={ref}
|
ref={ref}
|
||||||
variant={variant}
|
variant={variant}
|
||||||
size={size}
|
size={size}
|
||||||
className={cn(
|
className={cn(
|
||||||
"absolute h-8 w-8 rounded-full",
|
"absolute h-8 w-8 rounded-full",
|
||||||
orientation === "horizontal"
|
orientation === "horizontal"
|
||||||
? "-right-12 top-1/2 -translate-y-1/2"
|
? "-right-12 top-1/2 -translate-y-1/2"
|
||||||
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
disabled={!canScrollNext}
|
disabled={!canScrollNext}
|
||||||
onClick={scrollNext}
|
onClick={scrollNext}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<ArrowRight className="h-4 w-4" />
|
<ChevronRight className="h-4 w-4" />
|
||||||
<span className="sr-only">Next slide</span>
|
<span className="sr-only">Next slide</span>
|
||||||
</Button>
|
</Button>
|
||||||
)
|
);
|
||||||
})
|
});
|
||||||
CarouselNext.displayName = "CarouselNext"
|
CarouselNext.displayName = "CarouselNext";
|
||||||
|
|
||||||
export {
|
export {
|
||||||
type CarouselApi,
|
type CarouselApi,
|
||||||
Carousel,
|
Carousel,
|
||||||
CarouselContent,
|
CarouselContent,
|
||||||
CarouselItem,
|
CarouselItem,
|
||||||
CarouselPrevious,
|
CarouselPrevious,
|
||||||
CarouselNext,
|
CarouselNext,
|
||||||
}
|
};
|
||||||
|
|
|
||||||
|
|
@ -21,11 +21,11 @@ export function DatePicker() {
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
data-empty={!date}
|
data-empty={!date}
|
||||||
className="data-[empty=true]:text-muted-foreground w-full h-12 justify-start text-left font-normal"
|
className="data-[empty=true]:text-muted-foreground w-full h-[64px] justify-start text-left font-normal"
|
||||||
>
|
>
|
||||||
<Icon
|
<Icon
|
||||||
name="calendar"
|
name="calendar"
|
||||||
className="w-4 h-4 text-teal-600 mr-2"
|
className="w-4 h-4 text-brand mr-2"
|
||||||
/>
|
/>
|
||||||
{date ? (
|
{date ? (
|
||||||
format(date, "dd.MM.yyyy")
|
format(date, "dd.MM.yyyy")
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,11 @@ import LogoIcon from "../../../public/images/icons/logo.svg";
|
||||||
import RestartIcon from "../../../public/images/icons/restart.svg";
|
import RestartIcon from "../../../public/images/icons/restart.svg";
|
||||||
import AnchorIcon from "../../../public/images/icons/anchor.svg";
|
import AnchorIcon from "../../../public/images/icons/anchor.svg";
|
||||||
import WidthIcon from "../../../public/images/icons/width.svg";
|
import WidthIcon from "../../../public/images/icons/width.svg";
|
||||||
|
import LikeIcon from "../../../public/images/icons/like.svg";
|
||||||
|
import StarIcon from "../../../public/images/icons/star.svg";
|
||||||
|
import VkIcon from "../../../public/images/icons/vk.svg";
|
||||||
|
import DzenIcon from "../../../public/images/icons/dzen.svg";
|
||||||
|
import TgIcon from "../../../public/images/icons/tg.svg";
|
||||||
|
|
||||||
// Объект с иконками для удобного доступа
|
// Объект с иконками для удобного доступа
|
||||||
const icons = {
|
const icons = {
|
||||||
|
|
@ -21,6 +26,11 @@ const icons = {
|
||||||
restart: RestartIcon,
|
restart: RestartIcon,
|
||||||
anchor: AnchorIcon,
|
anchor: AnchorIcon,
|
||||||
width: WidthIcon,
|
width: WidthIcon,
|
||||||
|
like: LikeIcon,
|
||||||
|
star: StarIcon,
|
||||||
|
vk: VkIcon,
|
||||||
|
dzen: DzenIcon,
|
||||||
|
tg: TgIcon,
|
||||||
};
|
};
|
||||||
|
|
||||||
// Компонент Icon оптимизированный для Next.js
|
// Компонент Icon оптимизированный для Next.js
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
|
||||||
<SelectPrimitive.Trigger
|
<SelectPrimitive.Trigger
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-full border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-full border border-input bg-transparent px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|
@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
|
||||||
<SelectPrimitive.Content
|
<SelectPrimitive.Content
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
|
"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
|
||||||
position === "popper" &&
|
position === "popper" &&
|
||||||
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||||
className
|
className
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,26 @@
|
||||||
import { SVGProps } from 'react';
|
import { SVGProps } from "react";
|
||||||
|
|
||||||
export type IconName = 'calendar' | 'map' | 'money' | 'people' | 'logo' | 'restart' | 'anchor' | 'width';
|
export type IconName =
|
||||||
|
| "calendar"
|
||||||
|
| "map"
|
||||||
|
| "money"
|
||||||
|
| "people"
|
||||||
|
| "logo"
|
||||||
|
| "restart"
|
||||||
|
| "anchor"
|
||||||
|
| "width"
|
||||||
|
| "like"
|
||||||
|
| "star"
|
||||||
|
| "vk"
|
||||||
|
| "dzen"
|
||||||
|
| "tg";
|
||||||
|
|
||||||
export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'name' | 'preserveAspectRatio'> {
|
export interface IconProps
|
||||||
name: IconName;
|
extends Omit<SVGProps<SVGSVGElement>, "name" | "preserveAspectRatio"> {
|
||||||
className?: string;
|
name: IconName;
|
||||||
size?: number | string;
|
className?: string;
|
||||||
color?: string;
|
size?: number | string;
|
||||||
preserveAspectRatio?: boolean;
|
color?: string;
|
||||||
maxSize?: number | string;
|
preserveAspectRatio?: boolean;
|
||||||
|
maxSize?: number | string;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue