change

2025-05-28 16:31:01 +05:00 · 2025-05-28 16:31:01 +05:00 · 8a80d3712b
parent f5ec6912f2
commit 8a80d3712b
6 changed files with 84 additions and 55 deletions
--- a/src/components/shared/designer-card.tsx
+++ b/src/components/shared/designer-card.tsx
@ -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]">
-        <div className="flex gap-4 overflow-y-auto">
-          <div className="flex-1 h-[345px]">
-            <img src={image?.path} alt="" className="size-full object-cover" />
-          </div>
-          <div className="flex-[0_0_70%]">
-            <div className="text-2xl mb-4">{name}</div>
+      <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"
+                />
+              </div>
+              <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 ?? "" }}
+                />
+              </div>
+            </div>
            <hr />
-            <div
-              className="mt-4 flex flex-col gap-3 normal"
-              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) => (
-                  <img
-                    src={item?.path}
-                    className="size-[140px] object-cover object-top"
-                  />
+                {images?.map((item, i) => (
+                  <div className="size-[140px] overflow-hidden">
+                    <img
+                      key={i}
+                      onClick={() => setActivePhoto(i)}
+                      src={item?.path}
+                      className="size-full hover:scale-105 transition-all cursor-pointer overflow-hidden object-cover object-top"
+                    />
+                  </div>
                ))}
              </div>
              {canScrollNext && (
--- a/src/components/shared/home/home-actions.tsx
+++ b/src/components/shared/home/home-actions.tsx
@ -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>
--- a/src/components/shared/impressions/designers.tsx
+++ b/src/components/shared/impressions/designers.tsx
@ -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">
--- a/src/components/shared/impressions/videos.tsx
+++ b/src/components/shared/impressions/videos.tsx
@ -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>
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@ -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: {
--- a/src/pages/impressions.tsx
+++ b/src/pages/impressions.tsx
@ -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>
  );
 }