Доработки по главной странице, итерация 4
This commit is contained in:
parent
0987860f54
commit
ee89eb9b83
|
|
@ -8,6 +8,7 @@
|
|||
"name": "marine-travel",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-navigation-menu": "^1.2.14",
|
||||
"@radix-ui/react-popover": "^1.1.15",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
|
|
@ -2865,6 +2866,42 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-dialog": {
|
||||
"version": "1.1.15",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
|
||||
"integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-dismissable-layer": "1.1.11",
|
||||
"@radix-ui/react-focus-guards": "1.1.3",
|
||||
"@radix-ui/react-focus-scope": "1.1.7",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-portal": "1.1.9",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-slot": "1.2.3",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"aria-hidden": "^1.2.4",
|
||||
"react-remove-scroll": "^2.6.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-direction": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-dialog": "^1.1.15",
|
||||
"@radix-ui/react-navigation-menu": "^1.2.14",
|
||||
"@radix-ui/react-popover": "^1.1.15",
|
||||
"@radix-ui/react-select": "^2.2.6",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
|
|
@ -1,3 +1,5 @@
|
|||
"use client";
|
||||
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DatePicker } from "@/components/ui/date-picker";
|
||||
|
|
@ -8,8 +10,16 @@ import {
|
|||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselNext,
|
||||
CarouselPrevious,
|
||||
} from "@/components/ui/carousel";
|
||||
import Image from "next/image";
|
||||
import Icon from "@/components/ui/icon";
|
||||
import { useState } from "react";
|
||||
|
||||
const yacht = {
|
||||
name: "Яхта",
|
||||
|
|
@ -17,19 +27,30 @@ const yacht = {
|
|||
price: "от 18 000 ₽",
|
||||
perTime: "/ час",
|
||||
feet: "7 Футов",
|
||||
mainImage: "/images/yacht.jpg",
|
||||
mainImage: "/images/featured-yacht/featured1.png",
|
||||
thumbnails: [
|
||||
"/images/yacht.jpg",
|
||||
"/images/another-yacht.jpg",
|
||||
"/images/yacht.jpg",
|
||||
"/images/another-yacht.jpg",
|
||||
"/images/yacht.jpg",
|
||||
"/images/featured-yacht/featured1.png",
|
||||
"/images/featured-yacht/featured2.png",
|
||||
"/images/featured-yacht/featured3.png",
|
||||
"/images/featured-yacht/featured4.png",
|
||||
"/images/featured-yacht/featured5.png",
|
||||
"/images/featured-yacht/featured6.png",
|
||||
"/images/featured-yacht/featured7.png",
|
||||
"/images/featured-yacht/featured8.png",
|
||||
"/images/featured-yacht/featured9.png",
|
||||
"/images/featured-yacht/featured10.png",
|
||||
],
|
||||
isPromoted: true,
|
||||
totalPrice: "0 ₽",
|
||||
};
|
||||
|
||||
export default function FeaturedYacht() {
|
||||
const [selectedImage, setSelectedImage] = useState(yacht.mainImage);
|
||||
|
||||
const handleThumbnailClick = (imageSrc: string) => {
|
||||
setSelectedImage(imageSrc);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mb-10">
|
||||
<Card className="overflow-hidden bg-white text-gray-900">
|
||||
|
|
@ -53,44 +74,59 @@ export default function FeaturedYacht() {
|
|||
{/* Main yacht image */}
|
||||
<div className="relative mb-6">
|
||||
<Image
|
||||
src={yacht.mainImage}
|
||||
src={selectedImage}
|
||||
alt={yacht.name}
|
||||
width={600}
|
||||
height={400}
|
||||
className="w-full h-80 object-cover rounded-lg"
|
||||
className="w-full h-80 object-cover rounded-[24px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Thumbnail images */}
|
||||
<div className="flex gap-3 mb-6 overflow-x-auto">
|
||||
{yacht.thumbnails.map(
|
||||
(thumb, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="relative flex-shrink-0"
|
||||
{/* Thumbnail images carousel */}
|
||||
<div className="relative mb-6">
|
||||
<Carousel
|
||||
opts={{
|
||||
align: "start",
|
||||
loop: false,
|
||||
slidesToScroll: 2,
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
<CarouselContent className="-ml-2 md:-ml-4">
|
||||
{yacht.thumbnails.map((thumb, idx) => (
|
||||
<CarouselItem
|
||||
key={idx}
|
||||
className="pl-2 md:pl-4 basis-auto"
|
||||
>
|
||||
<div className="relative">
|
||||
<Image
|
||||
src={thumb}
|
||||
alt={`${
|
||||
yacht.name
|
||||
} view ${idx + 1}`}
|
||||
alt={`${yacht.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"
|
||||
className={`w-20 h-16 object-cover rounded-[8px] cursor-pointer border-2 transition-all ${
|
||||
selectedImage === thumb
|
||||
? "border-[#008299]"
|
||||
: "border-gray-200 hover:border-gray-400"
|
||||
}`}
|
||||
onClick={() =>
|
||||
handleThumbnailClick(thumb)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 bg-white hover:bg-gray-50 shadow-lg z-10" />
|
||||
<CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 bg-white hover:bg-gray-50 shadow-lg z-10" />
|
||||
</Carousel>
|
||||
</div>
|
||||
|
||||
{/* Promoted badge */}
|
||||
{yacht.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="underline cursor-pointer">
|
||||
|
|
@ -116,8 +152,7 @@ export default function FeaturedYacht() {
|
|||
}}
|
||||
>
|
||||
<span className="text-xs font-medium relative z-10">
|
||||
Заметнее других — бронируют
|
||||
быстрее
|
||||
Заметнее других — бронируют быстрее
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -179,9 +214,7 @@ export default function FeaturedYacht() {
|
|||
<span className="font-normal">
|
||||
Итого:
|
||||
</span>
|
||||
<span>
|
||||
{yacht.totalPrice}
|
||||
</span>
|
||||
<span>{yacht.totalPrice}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export default function Hero() {
|
|||
|
||||
{/* Кнопка для мобильных устройств */}
|
||||
<div className="md:hidden flex justify-center">
|
||||
<Button className="bg-brand hover:bg-brand-hover active:bg-brand-active font-bold text-white h-[64px] border-0 px-8 text-lg w-full">
|
||||
<Button variant="gradient" className="font-bold text-white h-[64px] border-0 px-8 text-lg w-full">
|
||||
Выберите яхту
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
const reviewCategories = [
|
||||
{
|
||||
|
|
@ -44,6 +49,12 @@ const reviewCategories = [
|
|||
];
|
||||
|
||||
export default function Reviews() {
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
|
||||
const handleCardClick = () => {
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="mt-8 md:mt-12">
|
||||
<div className="container mx-auto max-w-6xl px-4">
|
||||
|
|
@ -55,6 +66,7 @@ export default function Reviews() {
|
|||
<div
|
||||
key={category.id}
|
||||
className="flex-1 min-w-28 cursor-pointer group"
|
||||
onClick={handleCardClick}
|
||||
>
|
||||
<div className="relative w-full h-39 rounded-lg overflow-hidden">
|
||||
<Image
|
||||
|
|
@ -77,6 +89,43 @@ export default function Reviews() {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Диалог */}
|
||||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||
<DialogContent
|
||||
className="!rounded-[10px] border-0 h-[700px] max-w-[370px] p-0 bg-cover bg-center bg-no-repeat flex flex-col"
|
||||
style={{ backgroundImage: "url(/images/yacht.jpg)" }}
|
||||
>
|
||||
{/* Кнопка закрытия */}
|
||||
<button
|
||||
onClick={() => setIsDialogOpen(false)}
|
||||
className="absolute top-4 right-4 w-8 h-8 bg-white/20 rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-colors z-10"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
{/* Пустое пространство для выталкивания контента вниз */}
|
||||
<div className="flex-1"></div>
|
||||
|
||||
{/* Нижняя секция с текстом и кнопкой */}
|
||||
<div className="p-6 space-y-4 bg-gradient-to-t from-black/60 to-transparent">
|
||||
<div className="space-y-2">
|
||||
<DialogTitle className="text-white text-xl font-bold">
|
||||
Тема
|
||||
</DialogTitle>
|
||||
<p className="text-white text-sm">Текст</p>
|
||||
</div>
|
||||
|
||||
{/* Кнопка с градиентом */}
|
||||
<Button
|
||||
variant="gradient"
|
||||
className="font-bold text-white h-[48px] w-full px-8"
|
||||
>
|
||||
Хочу также
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||
import { X } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const Dialog = DialogPrimitive.Root
|
||||
|
||||
const DialogTrigger = DialogPrimitive.Trigger
|
||||
|
||||
const DialogPortal = DialogPrimitive.Portal
|
||||
|
||||
const DialogClose = DialogPrimitive.Close
|
||||
|
||||
const DialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
||||
|
||||
const DialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
))
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName
|
||||
|
||||
const DialogHeader = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-1.5 text-center sm:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
DialogHeader.displayName = "DialogHeader"
|
||||
|
||||
const DialogFooter = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
DialogFooter.displayName = "DialogFooter"
|
||||
|
||||
const DialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-lg font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
||||
|
||||
const DialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogPortal,
|
||||
DialogOverlay,
|
||||
DialogTrigger,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogFooter,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
}
|
||||
Loading…
Reference in New Issue