change

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]">
+      <DialogContent
-        <div className="flex gap-4 overflow-y-auto">
+        className={cn("p-6 flex flex-col gap-4 xl:!w-[1224px] max-h-[80vh]")}
-          <div className="flex-1 h-[345px]">
+      >
-            <img src={image?.path} alt="" className="size-full object-cover" />
+        {activePhoto === 100 ? (
-          </div>
+          <>
-          <div className="flex-[0_0_70%]">
+            <div className="flex gap-4 overflow-y-auto">
-            <div className="text-2xl mb-4">{name}</div>
+              <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 className="">
-            />
+            <button
-          </div>
+              onClick={() => setActivePhoto(100)}
-        </div>
+              className="flex items-center gap-2 mb-4"
-        <hr />
+            >
+              <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) => (
-                  <img
+                  <div className="size-[140px] overflow-hidden">
-                    src={item?.path}
+                    <img
-                    className="size-[140px] object-cover object-top"
+                      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 && (

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>

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">

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>

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: {

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>
   );
 }