change
This commit is contained in:
Batyr
parent
f5ec6912f2
commit
8a80d3712b
|
|
@ -3,6 +3,7 @@ import { cn } from "@/lib/utils";
|
|||
import { Dialog, DialogContent, DialogTrigger } from "../ui/dialog";
|
||||
import useEmblaCarousel from "embla-carousel-react";
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
|
||||
import { useLangStore } from "@/store/lang";
|
||||
|
||||
interface Props {
|
||||
name: string;
|
||||
|
|
@ -27,6 +28,9 @@ export const DesignerCard: FC<Props> = ({
|
|||
const [emblaRef, emblaApi] = useEmblaCarousel({});
|
||||
const [canScrollPrev, setCanScrollPrev] = useState(false);
|
||||
const [canScrollNext, setCanScrollNext] = useState(false);
|
||||
const lang = useLangStore((state) => state.lang);
|
||||
|
||||
const [activePhoto, setActivePhoto] = useState(100);
|
||||
|
||||
useEffect(() => {
|
||||
if (!emblaApi) return;
|
||||
|
|
@ -48,7 +52,7 @@ export const DesignerCard: FC<Props> = ({
|
|||
<Dialog>
|
||||
<DialogTrigger
|
||||
className={cn(
|
||||
"relative bg-[url('/impressions/card-bg.png')] bg-no-repeat h-[326px] overflow-hidden",
|
||||
"relative bg-[url('/impressions/card-bg.png')] group bg-no-repeat h-[326px] overflow-hidden",
|
||||
className
|
||||
)}
|
||||
>
|
||||
|
|
@ -62,14 +66,14 @@ export const DesignerCard: FC<Props> = ({
|
|||
<img
|
||||
src={image?.path}
|
||||
alt={name}
|
||||
className="flex-[0_0_44%] -mt-2.5 object-contain overflow-hidden"
|
||||
className="flex-[0_0_44%] object-contain overflow-hidden"
|
||||
/>
|
||||
|
||||
<div className="flex-auto text-left text-white z-20 pt-6 pl-4 pr-4">
|
||||
<h3 className="text-xl mb-2">{name}</h3>
|
||||
<h3 className="text-xl mb-6">{name}</h3>
|
||||
<ul className="text-sm list-disc pl-4 flex flex-col gap-2">
|
||||
{achievements.slice(0, 7).map((item, i) => (
|
||||
<li key={i}>{item.ru}</li>
|
||||
<li key={i}>{lang === "ru" ? item?.ru : item?.en}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -77,25 +81,52 @@ export const DesignerCard: FC<Props> = ({
|
|||
</article>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent className="p-6 flex flex-col gap-4 xl:!w-[1224px] max-h-[80vh]">
|
||||
<DialogContent
|
||||
className={cn("p-6 flex flex-col gap-4 xl:!w-[1224px] max-h-[80vh]")}
|
||||
>
|
||||
{activePhoto === 100 ? (
|
||||
<>
|
||||
<div className="flex gap-4 overflow-y-auto">
|
||||
<div className="flex-1 h-[345px]">
|
||||
<img src={image?.path} alt="" className="size-full object-cover" />
|
||||
<img
|
||||
src={image?.path}
|
||||
alt=""
|
||||
className="size-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-[0_0_70%]">
|
||||
<div className="flex-[0_0_70%] overflow-y-auto">
|
||||
<div className="text-2xl mb-4">{name}</div>
|
||||
<hr />
|
||||
<div
|
||||
className="mt-4 flex flex-col gap-3 normal"
|
||||
dangerouslySetInnerHTML={{ __html: biography }}
|
||||
dangerouslySetInnerHTML={{ __html: biography ?? "" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
</>
|
||||
) : (
|
||||
<div className="">
|
||||
<button
|
||||
onClick={() => setActivePhoto(100)}
|
||||
className="flex items-center gap-2 mb-4"
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
Вернуться назад
|
||||
</button>
|
||||
|
||||
<div>
|
||||
<div className="h-[35vh] bg-[#f4f4f4]">
|
||||
<img
|
||||
src={images?.[activePhoto]?.path}
|
||||
className="size-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="">
|
||||
<h3 className="text-xl mb-2.5">Работы дизайнера</h3>
|
||||
<div ref={emblaRef} className="embla overflow-hidden">
|
||||
<div ref={null} className="embla overflow-hidden">
|
||||
<div className="embla__container items-center flex gap-4">
|
||||
{canScrollPrev && (
|
||||
<ChevronLeftIcon
|
||||
|
|
@ -107,11 +138,15 @@ export const DesignerCard: FC<Props> = ({
|
|||
/>
|
||||
)}
|
||||
<div className="flex items-center gap-4">
|
||||
{images.map((item) => (
|
||||
{images?.map((item, i) => (
|
||||
<div className="size-[140px] overflow-hidden">
|
||||
<img
|
||||
key={i}
|
||||
onClick={() => setActivePhoto(i)}
|
||||
src={item?.path}
|
||||
className="size-[140px] object-cover object-top"
|
||||
className="size-full hover:scale-105 transition-all cursor-pointer overflow-hidden object-cover object-top"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{canScrollNext && (
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export const HomeActions: FC<Props> = ({ className }) => {
|
|||
return (
|
||||
<section className={cn("", className)}>
|
||||
<Container>
|
||||
<div className="grid md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-6">
|
||||
<div className="grid lg:grid-cols-6 sm:grid-cols-2 grid-cols-1 gap-6">
|
||||
{items.map((item, i) =>
|
||||
!item.dropdown ? (
|
||||
<Link
|
||||
|
|
@ -38,7 +38,7 @@ export const HomeActions: FC<Props> = ({ className }) => {
|
|||
<Button
|
||||
variant={"teritary"}
|
||||
size={"lg"}
|
||||
className="w-full drop-shadow-sm shadow-md md:text-xl text-lg bg-teritary text-on_teritary hover:bg-teritary/90"
|
||||
className="w-full !flex drop-shadow-sm px-2 shadow-md md:text-lg bg-teritary text-on_teritary hover:bg-teritary/90"
|
||||
>
|
||||
{item.text}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,26 @@ import { Container } from "@/components/layout";
|
|||
import { DesignerCard, Loader } from "../";
|
||||
import useEmblaCarousel from "embla-carousel-react";
|
||||
import { useDesigners } from "@/hooks/tanstack/use-designers";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const Designers = () => {
|
||||
const [emblaRef] = useEmblaCarousel({ align: "center" });
|
||||
const { t } = useTranslation("main");
|
||||
|
||||
const { title, text } = t("impressions.designers", {
|
||||
returnObjects: true,
|
||||
}) as {
|
||||
title: string;
|
||||
text: string;
|
||||
};
|
||||
|
||||
const { data, isPending } = useDesigners(1);
|
||||
|
||||
return (
|
||||
<section className="py-[200px]">
|
||||
<section className="py-20">
|
||||
<Container className="flex flex-col gap-10">
|
||||
<h2 className="text-5xl">Дизайнеры одежды</h2>
|
||||
<h2 className="text-5xl leading-[120%]">{title}</h2>
|
||||
<p className="text-lg normal text-on_surface_v">{text}</p>
|
||||
|
||||
<div ref={emblaRef} className="embla">
|
||||
<div className="flex embla__container">
|
||||
|
|
|
|||
|
|
@ -9,9 +9,11 @@ const Videos = () => {
|
|||
return (
|
||||
<section className="bg-[url('/impressions/videos-block-bg.png')] py-20">
|
||||
<Container>
|
||||
<h2 className="mb-10 text-5xl leading-[120%] text-white">{title}</h2>
|
||||
<h2 className="mb-10 text-5xl leading-[120%] text-white text-center">
|
||||
{title}
|
||||
</h2>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-[1fr_32.5%] gap-4 text-white overflow-hidden h-auto md:h-[497px]">
|
||||
<div className="grid grid-cols-1 md:grid-cols-1 mx-48 gap-4 text-white overflow-hidden h-auto md:h-[497px]">
|
||||
{/* FIRST BLOCK */}
|
||||
<div className="bg-gray_10 p-2 rounded-[8px] border border-gray_09 flex flex-col h-full">
|
||||
<div className="max-h-[453px]">
|
||||
|
|
@ -24,16 +26,16 @@ const Videos = () => {
|
|||
className="w-full size-full mb-2 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between mt-auto">
|
||||
{/* <div className="flex items-center justify-between mt-auto">
|
||||
<h3 className="text-sm">
|
||||
Алена Ахмадуллина | 'Царевна-Лебедь' (74 симв.)
|
||||
</h3>
|
||||
<span className="text-xs normal">1/10</span>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* SECOND BLOCK */}
|
||||
<div className="bg-gray_10 px-2 pt-2 rounded-[8px] border border-gray_09 flex flex-col h-full min-h-0">
|
||||
{/* <div className="bg-gray_10 px-2 pt-2 rounded-[8px] border border-gray_09 flex flex-col h-full min-h-0">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-sm">Смотрите также</h3>
|
||||
<span className="text-xs normal">1/10</span>
|
||||
|
|
@ -59,7 +61,8 @@ const Videos = () => {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
{/* SECOND BLOCK */}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
|
|||
import { Loader2 } from "lucide-react";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-[18px] leading-[140%] 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 items-center justify-center gap-2 rounded-md text-[18px] leading-[140%] 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: {
|
||||
variant: {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { Designers, Hero, Videos } from "@/components/shared/impressions";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useScrollTop } from "@/hooks/use-scroll-top";
|
||||
|
||||
export default function Impressions() {
|
||||
|
|
@ -10,24 +9,6 @@ export default function Impressions() {
|
|||
<Hero />
|
||||
<Videos />
|
||||
<Designers />
|
||||
<section className="bg-[url('/CTA.png')] py-20 ">
|
||||
<div className="flex flex-col gap-6 text-center max-w-[808px] mx-auto">
|
||||
<h3 className="text-white text-3xl">
|
||||
Тренды туркменского текстиля 2025/2026
|
||||
</h3>
|
||||
<p className="text-lg text-primary_03 normal">
|
||||
Скачайте наш эксклюзивный гид и первыми узнайте о новейших
|
||||
тенденциях, инновационных материалах и вдохновляющих коллекциях,
|
||||
которые определят будущее туркменской текстильной индустрии
|
||||
</p>
|
||||
<Button
|
||||
className="bg-reverse_primary w-fit mx-auto hover:bg-reverse_primary/90 text-on_secondary_container"
|
||||
size={"sm"}
|
||||
>
|
||||
Скачать гид
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue