change

src/components/shared/designer-card.tsx

@@ -48,12 +48,48 @@ export const DesignerCard: FC<Props> = ({
     };
   }, [emblaApi]);
 
+  const Works = ({ className }: { className?: string }) => {
+    return (
+      <div className={cn("", className)}>
+        <h3 className="text-xl mb-2.5">Работы дизайнера</h3>
+        <div ref={null} className="embla overflow-hidden">
+          <div className="embla__container items-center flex gap-4">
+            {canScrollPrev && (
+              <ChevronLeftIcon
+                onClick={() => canScrollPrev && emblaApi?.scrollPrev()}
+                className={cn("cursor-pointer", !canScrollPrev && "opacity-20")}
+              />
+            )}
+            <div className="flex items-center gap-4">
+              {images?.map((item, i) => (
+                <div className="lg:size-[140px] size-[70px] 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 && (
+              <ChevronRightIcon
+                onClick={() => canScrollPrev && emblaApi?.scrollNext()}
+                className={cn("cursor-pointer", !canScrollNext && "opacity-20")}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <Dialog>
       <DialogTrigger
         className={cn("relative group h-[326px] overflow-hidden", className)}
       >
-        <article className="z-50 size-full bg-[url('/impressions/card-bg.png')] bg-no-repeat overflow-hidden">
+        <article className="z-50 size-full bg-[url('/impressions/card-bg.png')]  bg-no-repeat overflow-hidden">
           <div className="flex gap-4 h-[316px] overflow-hidden">
             <img
               src={image?.path}
@@ -79,28 +115,46 @@ export const DesignerCard: FC<Props> = ({
       </DialogTrigger>
 
       <DialogContent
-        className={cn("p-6 flex flex-col gap-4 xl:!w-[1224px] max-h-[80vh]")}
+        className={cn(
+          "p-6 flex flex-col gap-4 xl:!w-[1224px] md:!w-[688px] w-[336px] max-h-[100vh] overflow-hidden"
+        )}
       >
         {activePhoto === 100 ? (
           <>
-            <div className="flex gap-4">
+            <div className="gap-4 md:!flex !hidden">
               <div className="flex-1 h-[345px]">
                 <img
                   src={image?.path}
                   alt=""
-                  className="size-full object-cover"
+                  className="size-full float-left object-cover"
                 />
               </div>
-              <div className="flex-[0_0_70%] ">
+              <div className="flex-[0_0_70%]">
                 <div className="text-2xl mb-4">{name}</div>
                 <hr />
                 <div
-                  className="mt-4 flex flex-col gap-3 normal overflow-y-auto max-h-[45vh]"
+                  className="mt-4 flex flex-col gap-3 normal overflow-y-auto max-h-[40vh]"
                   dangerouslySetInnerHTML={{ __html: biography ?? "" }}
                 />
               </div>
             </div>
-            <hr />
+            <hr className="hidden md:block" />
+
+            <div className="flex flex-col gap-4 md:hidden overflow-auto h-full">
+              <h3 className="text-xl">{name}</h3>
+              <img src={image?.path} alt={name} />
+
+              <hr />
+
+              <Works />
+
+              <hr />
+
+              <div
+                className="mt-4 flex flex-col gap-3 normal"
+                dangerouslySetInnerHTML={{ __html: biography ?? "" }}
+              />
+            </div>
           </>
         ) : (
           <div className="">
@@ -121,46 +175,7 @@ export const DesignerCard: FC<Props> = ({
           </div>
         )}
 
-        <div className="">
+        {<Works className="hidden md:block" />}
-          <h3 className="text-xl mb-2.5">Работы дизайнера</h3>
-          <div
-            ref={images?.length > 8 ? emblaRef : null}
-            className="embla overflow-hidden"
-          >
-            <div className="embla__container items-center flex gap-4">
-              {canScrollPrev && (
-                <ChevronLeftIcon
-                  onClick={() => canScrollPrev && emblaApi?.scrollPrev()}
-                  className={cn(
-                    "cursor-pointer",
-                    !canScrollPrev && "opacity-20"
-                  )}
-                />
-              )}
-              <div className="flex items-center gap-4">
-                {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 && (
-                <ChevronRightIcon
-                  onClick={() => canScrollPrev && emblaApi?.scrollNext()}
-                  className={cn(
-                    "cursor-pointer",
-                    !canScrollNext && "opacity-20"
-                  )}
-                />
-              )}
-            </div>
-          </div>
-        </div>
       </DialogContent>
     </Dialog>
   );

src/components/shared/hover-menu.tsx

@@ -43,7 +43,7 @@ export const HoverMenu: FC<Props> = ({
               <NavigationMenuLink
                 key={i}
                 onClick={() => setIsOpen(false)}
-                className="h-14 py-2 flex items-center justify-center w-40 cursor-pointer px-4 hover:bg-slate-300/50  transition-all"
+                className="h-14 py-2 flex items-center  w-40 cursor-pointer px-4 hover:bg-slate-300/50  transition-all"
               >
                 <Link to={item.link ?? ""}>{item.text}</Link>
               </NavigationMenuLink>

src/components/shared/impressions/designers.tsx

@@ -54,10 +54,10 @@ const Designers = () => {
   const { data, isPending } = useDesigners(1);
 
   return (
-    <section className="py-20">
+    <section className="md:py-20 py-10">
-      <Container className="flex flex-col gap-10">
+      <Container className="flex flex-col md:gap-10 gap-6">
-        <h2 className="text-5xl leading-[120%]">{title}</h2>
+        <h2 className="md:text-5xl text-2xl leading-[120%]">{title}</h2>
-        <p className="text-xl normal text-on_surface_v">{text}</p>
+        <p className="md:text-xl text-lg normal text-on_surface_v">{text}</p>
 
         <div ref={emblaRef} className="embla">
           <div className="flex embla__container">

src/components/shared/impressions/hero.tsx

@@ -1,10 +1,12 @@
 import { Container } from "@/components/layout";
 import { Button } from "@/components/ui/button";
+import { useLangStore } from "@/store/lang";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 const Hero = () => {
   const { t } = useTranslation("main");
+  const lang = useLangStore((state) => state.lang);
 
   const { title, texts, button, button2 } = t("impressions.hero", {
     returnObjects: true,
@@ -13,24 +15,28 @@ const Hero = () => {
   return (
     <section className="">
       <img
-        src="/impressions-cover.png"
+        src={
+          lang === "ru" ? "/impressions-cover.png" : "/impressions-cover-en.png"
+        }
         alt=""
         className="w-full object-cover object-top max-h-[610px]"
       />
       <h1 className="absolute opacity-0 top-0 left-0">Показы</h1>
 
       <div className="bg-[url('/impressions-bg.png')]">
-        <Container className="py-20">
+        <Container className="md:py-20 py-10">
-          <h2 className="text-5xl leading-[120%] mb-10">{title}</h2>
+          <h2 className="md:text-5xl text-2xl leading-[120%] md:mb-10 mb-6">
+            {title}
+          </h2>
           <div className="text-on_surface_v flex flex-col gap-3">
             {texts.map((item, i) => (
-              <p className="text-lg" key={i}>
+              <p className="md:text-lg !normal" key={i}>
                 {item}
               </p>
             ))}
           </div>
 
-          <div className="flex items-center gap-6 mt-6">
+          <div className="flex md:flex-row flex-col  items-center gap-6 mt-6">
             <Link
               target="_blank"
               to="https://turkmentextile.turkmenexpo.com/app/storage/app/media/ICS%20file/TurkmenTextile%20Expo-2025.ics"

src/components/shared/impressions/videos.tsx

@@ -7,16 +7,16 @@ const Videos = () => {
   const title = t("impressions.videosTitle");
 
   return (
-    <section className="bg-[url('/impressions/videos-block-bg.png')] py-20">
+    <section className="bg-[url('/impressions/videos-block-bg.png')] md:py-20 py-10">
       <Container>
-        <h2 className="mb-10 text-5xl leading-[120%] text-white text-center">
+        <h2 className="mb-10 md:text-5xl text-2xl leading-[120%] text-white text-center">
           {title}
         </h2>
 
-        <div className="grid grid-cols-1 md:grid-cols-1 mx-48 gap-4 text-white overflow-hidden h-auto md:h-[497px]">
+        <div className="grid grid-cols-1 md:grid-cols-1 mx-0 lg: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]">
+            <div className="maxh-[453px]">
               <video
                 src="https://turkmentextile.turkmenexpo.com/app/storage/app/media/video/Textile2025.mp4"
                 muted

src/locales/en/main.json

@@ -1,19 +1,19 @@
 {
   "impressions": {
     "hero": {
-      "title": "TurkmenTextile Expo-2025 – Перекресток стиля на Шелковом Пути!",
+      "title": "TurkmenTextile Expo-2025 – A Crossroads of Style on the Silk Road!",
       "texts": [
-        "От самого сердца Великого Шелкового пути — к сияющим вершинам мировой моды!",
+        "From the very heart of the Great Silk Road — to the shining heights of global fashion!",
-        "TurkmenTextile Expo-2025 приглашает вас в увлекательное путешествие, где встречаются вековые традиции, самые актуальные тренды и безграничный талант дизайнеров со всего мира. Это гармония, созданная вдохновением и мастерством.",
+        "TurkmenTextile Expo-2025 invites you on an exciting journey where centuries-old traditions meet cutting-edge trends and the boundless creativity of designers from around the world. It’s a harmony born of inspiration and craftsmanship.",
-        "Не упустите возможность стать частью этого грандиозного события! Присоединяйтесь к нам с 11 по 13 июня в Торгово-Промышленной Палате Туркменистана, Ашхабад."
+        "Don’t miss the chance to be part of this grand event! Join us from June 11 to 13 at the Chamber of Commerce and Industry of Turkmenistan, Ashgabat."
       ],
-      "button": "Добавить в календарь (.ics файл)",
+      "button": "Add to calendar",
-      "button2": "Скачать программу"
+      "button2": "Download program"
     },
     "designers": {
-      "title": "Знакомство с мастерами моды: TurkmenTextile Expo-2025 представляет мировых дизайнеров!",
+      "title": "Meet the Masters of Fashion: TurkmenTextile Expo-2025 Showcases World-Renowned Designers",
-      "text": "Международная выставка TurkmenTextile Expo-2025 с особой гордостью приветствует на своей площадке именитых дизайнеров с мировым именем. Их участие привносит в мероприятие не только свежие тенденции и инновационные подходы, но и уникальное видение будущего модной индустрии. Мы с удовольствием представляем вашему вниманию работы и портреты этих выдающихся дизайнеров, чье присутствие делает TurkmenTextile Expo-2025 по-настоящему знаковым событием в мире моды."
+      "text": "TurkmenTextile Expo-2025 is proud to welcome internationally acclaimed designers to its prestigious platform. Their presence brings not only the latest trends and innovative approaches but also a unique vision of the future of the fashion industry. We are delighted to present the works and profiles of these outstanding creatives, whose participation makes TurkmenTextile Expo-2025 a truly landmark event in the global fashion scene."
     },
-    "videosTitle": "Элита мировой моды: эксклюзивные коллекции международных дизайнеров на TurkmenTextile Expo-2025"
+    "videosTitle": "“The Elite of Global Fashion: Exclusive Collections by International Designers at TurkmenTextileExpo-2025”"
   }
 }