fixes, todo: desktop promotion

src/components/Clients.tsx

@@ -2,12 +2,12 @@ import { clients } from '../consts/clients';
 
 export function Clients() {
   return (
-    <div className="space-y-8">
-      <div className="flex items-center overflow-hidden w-screen lg:-mx-10 -mx-6 mt-10 min-h-[117px]">
+    <div className="mt-[100px] space-y-8">
+      <div className="flex items-center overflow-hidden w-screen mt-10 min-h-[117px]">
         <MarqueeHalf items={clients.slice(0, clients.length / 3)} />
         <MarqueeHalf items={clients.slice(0, clients.length / 3)} />
       </div>
-      <div className="flex items-center overflow-hidden w-screen lg:-mx-10 -mx-6 min-h-[117px]">
+      <div className="flex items-center overflow-hidden w-screen min-h-[117px]">
         <MarqueeHalf
           reversed
           items={clients.slice(clients.length / 3, (2 * clients.length) / 3)}
@@ -17,7 +17,7 @@ export function Clients() {
           items={clients.slice(clients.length / 3, (2 * clients.length) / 3)}
         />
       </div>
-      <div className="border-b border-[#3D425C] flex items-center overflow-hidden w-screen lg:-mx-10 -mx-6 min-h-[117px] pb-16">
+      <div className="border-b border-[#3D425C] flex items-center overflow-hidden w-screen min-h-[117px] pb-16">
         <MarqueeHalf items={clients.slice(2 * (clients.length / 3))} />
         <MarqueeHalf items={clients.slice(2 * (clients.length / 3))} />
       </div>
@@ -42,7 +42,10 @@ function MarqueeHalf({
       }
     >
       {items.map(client => (
-        <div className="border-l border-[#3D425C] w-[312px] h-[124px] flex justify-center items-center relative">
+        <div
+          key={client.src}
+          className="border-l border-[#3D425C] w-[312px] h-[124px] flex justify-center items-center relative"
+        >
           <img
             key={client.src}
             src={client.src}

src/components/Contacts.tsx

@@ -11,22 +11,23 @@ export function Contacts() {
   return (
     <div
       id="contacts"
-      className="grid grid-cols-12 grid-rows-[repeat(min-content,2)] gap-x-4 gap-y-20 lg:px-6 pb-20 mt-[200px]"
+      className="lg:px-6 px-4 sm:grid lg:grid-cols-12 sm:grid-cols-2 lg:grid-rows-[repeat(min-content,2)] sm:grid-rows-[repeat(min-content,3)] lg:gap-x-4 sm:gap-x-14 lg:gap-y-[68px] pb-20 pt-[70px]"
     >
-      <h2 className="col-span-7 h2 font-medium">
-        Хотите увеличить конверсию?{' '}
+      <h2 className="font-medium lg:col-span-7 sm:col-span-full h2 max-lg:mb-6">
+        Хотите использовать интерактивные тренажеры в обучении?
+        <br />
         <span className="text-gradient">Давайте обсудим детали.</span>
       </h2>
       <Button
         color="primary"
         icon={<SendIcon />}
-        className="col-span-3 row-start-2 self-end px-6 py-4"
+        className="self-end row-start-2 px-6 py-4 lg:col-span-3 sm:max-lg:mb-20 max-sm:mb-14"
         width="full"
       >
         Оставить заявку
       </Button>
-      <div className="space-y-3 col-start-9 col-span-4">
-        <h4 className="h4 font-medium mb-1">Свяжитесь с нами</h4>
+      <div className="space-y-3 lg:col-start-9 lg:col-span-4 sm:col-span-1 sm:col-start-1 max-sm:mb-8">
+        <h4 className="mb-1 text-xl font-medium">Свяжитесь с нами</h4>
         <Button
           color="secondary"
           className="py-4"
@@ -44,8 +45,8 @@ export function Contacts() {
           <span className="btn-text opacity-80">Позвонить</span>
         </Button>
       </div>
-      <div className="space-y-4 col-start-9 col-span-4 row-start-2 self-end">
-        <h4 className="h4 font-medium">Социальные сети</h4>
+      <div className="col-start-2 space-y-4 lg:col-start-9 lg:col-span-4 lg:row-start-2 sm:row-start-3 lg:self-end sm:flex sm:flex-col sm:justify-between">
+        <h4 className="font-medium h4">Социальные сети</h4>
         <div className="flex gap-x-2">
           <Link
             to={'https://www.youtube.com/@GRAFFtech'}
@@ -60,7 +61,7 @@ export function Contacts() {
             <VKIcon />
           </Link>
           <Link
-            to={'https://t.me/graffestate'}
+            to={'https://t.me/GRAFFinteractive'}
             className="p-4 rounded-full opacity-80 border-[#3D425C] border hover:border-[#52587A] transition-all"
           >
             <TelegramIcon />

src/components/Devices.tsx

@@ -4,25 +4,32 @@ import { IDevice } from '../types/IDevice';
 import { Title } from './ui/Title';
 import { useEffect, useRef, useState } from 'react';
 import { useHover } from 'usehooks-ts';
+import { ChevronUpIcon } from './icons/ChevronUpIcon';
+import { ChevronDownIcon } from './icons/ChevronDownIcon';
 
 export function Devices() {
   return (
-    <div id="devices" className="space-y-20">
+    <div id="devices" className="space-y-8 sm:space-y-10 lg:space-y-20">
       <Title>
         Работаем с
         <span className="text-gradient"> любыми типами оборудования</span>
         <br /> и предложим лучшее мультимедийное оснащение
       </Title>
-      <div>
+      <div className="max-lg:hidden">
         {devices.map((device, index) => (
-          <Device key={device.title} {...device} number={index + 1} />
+          <DesktopDevice key={device.title} {...device} number={index + 1} />
+        ))}
+      </div>
+      <div className="lg:hidden">
+        {devices.map(device => (
+          <Device key={device.title} {...device} />
         ))}
       </div>
     </div>
   );
 }
 
-function Device({
+function DesktopDevice({
   title,
   description,
   img,
@@ -52,9 +59,9 @@ function Device({
       }}
     >
       <div className="space-y-6">
-        <p className="h3 font-medium">{title}</p>
+        <p className="font-medium h3">{title}</p>
         {hovered && (
-          <motion.p
+          <motion.div
             ref={descriptionRef}
             initial={{ opacity: 0 }}
             animate={{ opacity: 0.6 }}
@@ -67,7 +74,7 @@ function Device({
                 <br />
               </p>
             ))}
-          </motion.p>
+          </motion.div>
         )}
       </div>
       <AnimatePresence>
@@ -87,3 +94,74 @@ function Device({
     </motion.div>
   );
 }
+
+function Device({ title, description, img }: IDevice) {
+  const [expanded, setExpanded] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+  const descriptionRef = useRef<HTMLParagraphElement>(null);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  const [descriptionHeight, setDescriptionHeight] = useState(0);
+  const [imgHeight, setImgHeight] = useState(0);
+
+  useEffect(() => {
+    if (!imgRef.current) return;
+    imgRef.current!.onload = () =>
+      setImgHeight(imgRef.current?.clientHeight ?? 0);
+  }, [imgRef, expanded]);
+
+  useEffect(() => {
+    setDescriptionHeight(descriptionRef.current?.clientHeight ?? 0);
+  }, [descriptionRef, expanded]);
+
+  useEffect(() => console.log(descriptionHeight), [descriptionHeight]);
+
+  return (
+    <motion.div
+      animate={{
+        height: expanded
+          ? (root.current?.clientHeight ?? 0) +
+            descriptionHeight +
+            imgHeight +
+            56
+          : 72,
+      }}
+      transition={{ duration: 0.4 }}
+      ref={root}
+      onClick={() => setExpanded(prev => !prev)}
+      className="py-4 space-y-6 border-t last:border-b border-[#3D425C]"
+    >
+      <div className="flex items-center justify-between py-2">
+        <p className="font-medium h3">{title}</p>
+        {expanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
+      </div>
+      <AnimatePresence>
+        {expanded && (
+          <motion.p
+            ref={descriptionRef}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: +expanded, transition: { delay: 0.4 } }}
+            exit={{ opacity: 0, transition: { delay: 0 } }}
+            transition={{ duration: 0.4 }}
+            className="mb-4 text-sm"
+          >
+            {description}
+          </motion.p>
+        )}
+      </AnimatePresence>
+      <AnimatePresence>
+        {expanded && (
+          <motion.img
+            ref={imgRef}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: +expanded, transition: { delay: 0.4 } }}
+            exit={{ opacity: 0, transition: { delay: 0 } }}
+            transition={{ duration: 0.4 }}
+            src={img}
+            alt=""
+          />
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+}

src/components/Form.tsx

@@ -3,7 +3,7 @@ import { FeedbackForm } from './Layout/FeedbackForm';
 
 export function Form() {
   return (
-    <div className="py-6 lg:space-y-20 sm:space-y-10 space-y-8">
+    <div className="py-6 space-y-8 lg:space-y-20 sm:space-y-10">
       <Title className="lg:max-w-[58vw]">
         Хотите интерактивное решение для выставки?
         <br className="max-lg:hidden" />

src/components/Layout/Footer.tsx

@@ -11,7 +11,7 @@ export function Footer() {
         <div className="flex flex-col gap-y-1">
           <Link
             to="https://graff.tech/privacypolicy"
-            className="sm:font-medium flex gap-4 m-text"
+            className="flex gap-4 sm:font-medium m-text"
           >
             Политика конфиденциальности <span>graff.tech</span>
           </Link>
@@ -20,7 +20,7 @@ export function Footer() {
           </p>
         </div>
       </div>
-      <div className="px-10 py-[30px] flex items-center border-t xl:border-l sm:border-r border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-1">
+      <div className="sm:px-6 px-4 py-[30px] flex items-center border-t xl:border-l sm:border-r border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-1">
         <div>
           <Contact type="email" text="info@graff.tech" />
           <Contact type="phone" text="+7 800 770 00 67" />
@@ -29,7 +29,7 @@ export function Footer() {
           RU
         </div>
       </div>
-      <div className="px-10 py-[30px] flex items-center border-t border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-2">
+      <div className="sm:px-6 px-4 py-[30px] flex items-center border-t border-[#3D425C] flex-1 justify-between sm:max-xl:row-start-2 sm:max-xl:col-start-2">
         <div>
           <Contact type="email" text="info@graff.tech" />
           <Contact type="phone" text="+971 58 506 0097" />

src/components/Layout/ScrollToHashElement.tsx

@@ -6,7 +6,6 @@ export function ScrollToHashElement() {
 
   useEffect(() => {
     const hashElement = document.getElementById(hash.slice(1));
-    console.log('scrolling to', hashElement);
     if (hashElement)
       hashElement.scrollIntoView({
         behavior: 'smooth',

src/components/Layout/index.tsx

@@ -15,7 +15,7 @@ export function Layout() {
     <div className="overflow-clip">
       <ScrollToHashElement />
       <Header />
-      <main className="lg:px-6 px-4 relative">
+      <main className="relative px-4 sm:px-6">
         {width >= 1024 && <Ellipse />}
         <Outlet />
       </main>

src/components/Projects.tsx

@@ -4,16 +4,16 @@ import { Title } from './ui/Title';
 
 export function Projects() {
   return (
-    <div id="projects" className="sm:space-y-6 space-y-10">
+    <div id="projects" className="space-y-10 sm:space-y-6">
       <Title>Проекты</Title>
-      <div className="lg:flex flex-col gap-y-16 sm:space-y-10 space-y-8">
-        <div className="lg:flex sm:space-y-10 space-y-8 gap-x-4">
+      <div className="flex-col max-sm:space-y-8 lg:flex gap-y-16 sm:max-lg:space-y-10">
+        <div className="max-sm:space-y-8 lg:flex sm:max-lg:space-y-10 gap-x-4">
           {projects.slice(0, 2).map(project => (
             <Project {...project} key={project.title} />
           ))}
         </div>
         <Project {...projects[2]} className="lg:max-w-[82vw] self-end" />
-        <div className="lg:flex sm:space-y-10 space-y-8 gap-x-4">
+        <div className="max-sm:space-y-8 lg:flex sm:max-lg:space-y-10 gap-x-4">
           {projects.slice(3).map(project => (
             <Project {...project} key={project.title} />
           ))}
@@ -31,14 +31,14 @@ function Project({
 }: IProject & { className?: string }) {
   return (
     <div className={'space-y-6 ' + className}>
-      <img src={img} alt={title} />
+      <img src={img} alt={title} className="object-cover" />
       <div className="space-y-2">
-        <h3 className="h3 font-medium">{title}</h3>
+        <h3 className="font-medium h3">{title}</h3>
         <div className="flex gap-x-6">
           {tags.map(tag => (
-            <div key={tag} className="flex items-center gap-x-2 py-2">
+            <div key={tag} className="flex items-center py-2 gap-x-2">
               <div className="w-3 h-3 bg-white" />
-              <p className="h4 font-medium">{tag}</p>
+              <p className="font-medium h4">{tag}</p>
             </div>
           ))}
         </div>

src/components/Promotion.tsx

@@ -1,7 +1,7 @@
 import { AnimatePresence, motion } from 'framer-motion';
 import { Title } from './ui/Title';
 import { promotionFeatures } from '../consts/promotionFeatures';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useHover } from 'usehooks-ts';
 import { useLocation } from 'react-router-dom';
 import { hashes } from '../consts/motivationHashes';
@@ -16,7 +16,7 @@ export function Promotion() {
   return (
     <div
       id="products"
-      className="lg:space-y-20 sm:space-y-10 space-y-8 lg:-mt-20 sm:-mt-10"
+      className="space-y-8 lg:space-y-20 sm:space-y-10 lg:-mt-20 sm:-mt-10"
     >
       <Title className="max-w-[calc(1310/1600*100vw)]">
         Повышаем количество посетителей на стенде,
@@ -96,7 +96,7 @@ function DesktopFeature({
             </p>
           </div>
           <motion.p
-            className="h4 opacity-60 font-medium"
+            className="font-medium h4 opacity-60"
             animate={
               hovered || hash.slice(1) === hashes.get(number)
                 ? { opacity: 0.6, transition: { delay: 0.5 } }
@@ -107,7 +107,7 @@ function DesktopFeature({
           </motion.p>
         </div>
         <motion.div
-          className="flex gap-x-2 items-start flex-1 justify-end"
+          className="flex items-start justify-end flex-1 gap-x-2"
           transition={{ duration: 1 }}
           animate={{
             translateX:
@@ -153,14 +153,30 @@ function Feature({
 }) {
   const [expanded, setExpanded] = useState(false);
 
+  const [descriptionHeight, setDescriptionHeight] = useState(0);
+
+  const root = useRef<HTMLDivElement>(null);
+  const descriptionRef = useRef<HTMLParagraphElement>(null);
+  // const imgRef = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    setDescriptionHeight(descriptionRef.current?.clientHeight ?? 0);
+  }, [expanded, descriptionRef]);
+
   return (
-    <div
+    <motion.div
       id={hashes.get(number)}
-      className="sm:py-4 py-2 sm:space-y-8 space-y-4 border-t border-[#3D425C] last:border-b"
+      ref={root}
+      animate={{
+        height: expanded
+          ? (root.current?.clientHeight ?? 0) + descriptionHeight + 16
+          : 'auto',
+      }}
+      className="sm:py-4 py-2 sm:space-y-8 space-y-4 border-t border-[#3D425C] last:border-b flex flex-col justify-between relative"
       onClick={() => setExpanded(prev => !prev)}
     >
-      <div className="flex justify-between items-center max-sm:items-start gap-x-5">
-        <p className="h3 font-medium">{title}</p>
+      <div className="flex items-center justify-between max-sm:items-start gap-x-5">
+        <p className="font-medium h3">{title}</p>
         <ClassNameWrapper
           className="flex-1"
           element={expanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
@@ -169,7 +185,8 @@ function Feature({
       <AnimatePresence>
         {expanded && (
           <motion.p
-            className="l-text font-medium"
+            ref={descriptionRef}
+            className="absolute font-medium top- l-text"
             transition={{ delay: 1 }}
             initial={{ opacity: 0 }}
             animate={
@@ -182,7 +199,7 @@ function Feature({
           </motion.p>
         )}
       </AnimatePresence>
-      <div className="flex gap-x-2 max-sm:hidden">
+      <div className="flex mb-0 gap-x-2 max-sm:hidden">
         {images.map((image, index) => (
           <AnimatePresence key={image}>
             <motion.div
@@ -202,9 +219,12 @@ function Feature({
           </AnimatePresence>
         ))}
       </div>
-      <div className="sm:hidden">
-        <img src={images[0]} className="object-cover w-full" alt={title} />
-      </div>
-    </div>
+      <img
+        // ref={imgRef}
+        src={images[0]}
+        className="object-cover w-full sm:hidden"
+        alt={title}
+      />
+    </motion.div>
   );
 }

src/components/Stands.tsx

@@ -9,7 +9,7 @@ export function Stands() {
   const width = useWindowWidth();
 
   return (
-    <div className="lg:space-y-20 sm:space-y-10">
+    <div className="space-y-10 lg:space-y-20">
       <Title>
         Мы разработчики с собственной
         <span className="text-gradient">
@@ -21,7 +21,7 @@ export function Stands() {
       <SliderWithScaling
         slides={stands}
         SlideElement={Stand}
-        className="space-y-8 pb-20"
+        className="pb-20 space-y-8"
         slideSizes={
           width >= 1024
             ? ['31.6vw', '31.8vw', '48vw', '48vw']
@@ -39,7 +39,7 @@ export function Stands() {
 const Stand = forwardRef<HTMLDivElement, IStand>(
   ({ annotation, img, title, year }, ref) => {
     return (
-      <div ref={ref} className="flex flex-col gap-y-4 h-full">
+      <div ref={ref} className="flex flex-col h-full gap-y-4">
         <img
           src={img}
           alt={title}
@@ -47,13 +47,13 @@ const Stand = forwardRef<HTMLDivElement, IStand>(
         />
         <div className="flex justify-between">
           <div className="space-y-2">
-            <p className="h4 font-medium">{title}</p>
-            <div className="flex gap-x-2 items-center">
+            <p className="font-medium h4">{title}</p>
+            <div className="flex items-center gap-x-2">
               <div className="w-2 h-2 bg-[#737AA1]" />
               <p className="text-xs text-[#737AA1] font-medium">{annotation}</p>
             </div>
           </div>
-          <p className="h4 font-medium">{year}</p>
+          <p className="font-medium h4">{year}</p>
         </div>
       </div>
     );

src/components/Statistics.tsx

@@ -6,7 +6,7 @@ import { statistics } from '../consts/statistics';
 
 export function Statistics() {
   return (
-    <div className="lg:space-y-20 sm:space-y-10 border-b border-[#3D425C]">
+    <div className="lg:space-y-20 sm:space-y-10 space-y-8 sm:border-b border-[#3D425C]">
       <Title>
         За 15 лет работы cоздали более <br />
         <span className="text-gradient"> 250 интерактивных проектов </span>с 3D
@@ -17,7 +17,7 @@ export function Statistics() {
           <Figure key={stat.title} {...stat} />
         ))}
       </div>
-      <div className="flex flex-col sm:hidden">
+      <div className="flex flex-col gap-y-0.5 sm:hidden">
         {statistics.map(stat => (
           <MobileFigure key={stat.title} {...stat} />
         ))}
@@ -26,7 +26,7 @@ export function Statistics() {
   );
 }
 
-function Figure({ color, percents, size, title }: IStatisticsItem) {
+function Figure({ color, percents, height, title }: IStatisticsItem) {
   const percentsValue = useMotionValue<number>(0);
   const percentsSpringValue = useSpring(percentsValue, {
     damping: 100,
@@ -61,9 +61,9 @@ function Figure({ color, percents, size, title }: IStatisticsItem) {
 
   useEffect(() => {
     if (inView) {
-      columnHeightValue.set(size);
+      columnHeightValue.set(height);
     }
-  }, [size, columnHeightValue, inView]);
+  }, [height, columnHeightValue, inView]);
 
   useEffect(() => {
     columnHeightSpringValue.on('change', prev => {
@@ -78,7 +78,7 @@ function Figure({ color, percents, size, title }: IStatisticsItem) {
       ref={root}
       className="relative flex flex-col gap-y-2 justify-end w-full h-[400px]"
     >
-      <p className="h4 font-medium text-center" style={{ color }}>
+      <p className="font-medium text-center h4" style={{ color }}>
         {title}
       </p>
       <motion.div
@@ -99,21 +99,26 @@ function Figure({ color, percents, size, title }: IStatisticsItem) {
   );
 }
 
-function MobileFigure({ color, percents, size, title }: IStatisticsItem) {
+function MobileFigure({
+  color,
+  percents,
+  widthPercents,
+  title,
+}: IStatisticsItem) {
   const percentsValue = useMotionValue<number>(0);
   const percentsSpringValue = useSpring(percentsValue, {
     damping: 100,
     stiffness: 100,
   });
 
-  const columnWidthValue = useMotionValue<number>(0);
-  const columnWidthSpringValue = useSpring(columnWidthValue, {
+  const rowWidthValue = useMotionValue<number>(0);
+  const rowWidthSpringValue = useSpring(rowWidthValue, {
     damping: 100,
     stiffness: 100,
   });
 
   const figureRef = useRef<HTMLParagraphElement>(null);
-  const columnRef = useRef<HTMLDivElement>(null);
+  const rowRef = useRef<HTMLDivElement>(null);
   const root = useRef<HTMLDivElement>(null);
 
   const inView = useInView(root);
@@ -134,28 +139,28 @@ function MobileFigure({ color, percents, size, title }: IStatisticsItem) {
 
   useEffect(() => {
     if (inView) {
-      columnWidthValue.set(size);
+      rowWidthValue.set(widthPercents);
     }
-  }, [size, columnWidthValue, inView]);
+  }, [widthPercents, rowWidthValue, inView]);
 
   useEffect(() => {
-    columnWidthSpringValue.on('change', prev => {
-      if (columnRef.current) {
-        columnRef.current!.style.width = `${prev}px`;
+    rowWidthSpringValue.on('change', prev => {
+      if (rowRef.current) {
+        rowRef.current!.style.width = `${prev}%`;
       }
     });
-  }, [columnWidthSpringValue, columnRef, percentsSpringValue]);
+  }, [rowWidthSpringValue, rowRef, percentsSpringValue]);
   return (
-    <motion.div ref={root} className="h-[220px]">
-      <p className="h4 font-medium" style={{ color }}>
-        {title}
-      </p>
     <motion.div
-        ref={columnRef}
-        className="border-r-[5px] transition-[width]"
+      ref={root}
+      className="h-[220px]s relative space-y-1 py-4 pl-[5px]"
+    >
+      <motion.div
+        ref={rowRef}
+        className="absolute left-0 top-0 border-r-[5px] transition-[width] h-full"
         style={{
           borderColor: color,
-          background: `linear-gradient(${color}33,#798FFF00)`,
+          background: `linear-gradient(to left,${color}33,#798FFF00)`,
         }}
       />
       <p
@@ -164,6 +169,9 @@ function MobileFigure({ color, percents, size, title }: IStatisticsItem) {
       >
         {percents}
       </p>
+      <p className="font-medium h4" style={{ color }}>
+        {title}
+      </p>
     </motion.div>
   );
 }

src/components/icons/ArrowLeftIcon.tsx

@@ -9,8 +9,8 @@ export function ArrowLeftIcon() {
     >
       <g opacity="0.8">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M8.12124 12.707L19.707 12.707L17.707 10.707L8.12124 10.707L13.4141 5.41406L11.9999 3.99985L4.29282 11.707L11.9999 19.4141L13.4141 17.9998L8.12124 12.707Z"
           fill="white"
         />

src/components/icons/ArrowRightIcon.tsx

@@ -9,8 +9,8 @@ export function ArrowRightIcon() {
     >
       <g opacity="0.8">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M15.8788 10.7071L4.29297 10.7071L6.29297 12.7071L15.8788 12.7071L10.5859 18L12.0001 19.4142L19.7072 11.7071L12.0001 4L10.5859 5.41421L15.8788 10.7071Z"
           fill="currentColor"
         />

src/components/icons/ChevronUpIcon.tsx

@@ -8,8 +8,8 @@ export function ChevronUpIcon() {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-Rule="evenodd"
-        clip-Rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M12.0001 6.58594L19.7072 14.293L18.293 15.7073L12.0001 9.41436L5.70718 15.7073L4.29297 14.293L12.0001 6.58594Z"
         fill="white"
       />

src/components/icons/Logo.tsx

@@ -7,10 +7,10 @@ export function Logo() {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g clip-path="url(#clip0_379_5771)">
+      <g clipPath="url(#clip0_379_5771)">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M20.1786 39.9999C31.3288 39.9999 40.3573 31.0513 40.3573 19.9999C40.3573 18.6514 40.2189 17.3257 39.9652 16.0457H27.7773V23.9771H31.7093C30.0489 28.6856 25.5289 32.0685 20.2132 32.0685C13.4909 32.0685 8.03686 26.6628 8.03686 19.9999C8.03686 13.3371 13.4909 7.93141 20.2132 7.93141V0H20.1786C9.04003 0 0 8.95998 0 19.9999C0 31.0513 9.04003 39.9999 20.1786 39.9999Z"
           fill="#798FFF"
         />
@@ -22,67 +22,67 @@ export function Logo() {
           opacity="0.3"
           d="M17.8381 8.1714C18.5991 8.03426 19.3832 7.95426 20.1903 7.95426V0H20.1673C18.5415 0 16.9618 0.182857 15.4512 0.537141L17.8381 8.1714Z"
           fill="black"
-          fill-opacity="0.6"
+          fillOpacity="0.6"
         />
         <path
           opacity="0.3"
           d="M7.19629 4.52567L5.93945 22.4799L7.73823 20.7999C7.7267 20.5942 7.7267 20.3885 7.7267 20.1713C7.7267 13.5199 13.1576 8.11423 19.8915 8.03423L11.8201 1.74854C10.1481 2.46853 8.5915 3.40567 7.19629 4.52567Z"
           fill="black"
-          fill-opacity="0.6"
+          fillOpacity="0.6"
         />
         <path
           opacity="0.3"
           d="M0 20.2286L9.18993 25.1086C8.4635 23.5658 8.05992 21.8515 8.05992 20.0458C8.05992 18.2401 8.4635 16.5144 9.20146 14.9829L6.38798 5.54297C2.45603 9.17724 0 14.3315 0 20.0458C0 20.1144 0 20.1715 0 20.2286Z"
           fill="black"
-          fill-opacity="0.6"
+          fillOpacity="0.6"
         />
         <path
           opacity="0.3"
           d="M0 19.4286L12.1994 37.4285L25.5173 37.6685L20.317 32.0342C20.2594 32.0342 20.2132 32.0342 20.1556 32.0342C13.4447 32.0342 8.00227 26.6742 8.00227 20.0686C8.00227 19.7943 8.0138 19.5314 8.02533 19.2686H0C0 19.3257 0 19.3714 0 19.4286Z"
           fill="black"
-          fill-opacity="0.6"
+          fillOpacity="0.6"
         />
         <path
           opacity="0.3"
           d="M8.85505 36.4915L16.6151 31.4744C11.5878 29.943 7.95566 25.4401 7.95566 20.1145C7.95566 19.4287 8.01331 18.7545 8.12862 18.103L2.96289 30.6858C4.49646 32.9944 6.50279 34.9716 8.85505 36.4915Z"
           fill="black"
-          fill-opacity="0.6"
+          fillOpacity="0.6"
         />
         <path
           opacity="0.3"
           d="M26.7067 38.9487C24.6311 39.6229 22.4173 40.0001 20.1111 40.0001C15.8448 40.0001 11.8898 38.7429 8.60352 36.5944L16.3752 31.543C17.5629 31.9087 18.8197 32.103 20.1342 32.103C20.1803 32.103 20.2264 32.103 20.2841 32.103L26.7067 38.9487Z"
           fill="black"
-          fill-opacity="0.6"
+          fillOpacity="0.6"
         />
         <path
           opacity="0.3"
           d="M24.63 39.5084C23.1772 39.8284 21.6666 39.9999 20.11 39.9999C19.4412 39.9999 18.7724 39.9656 18.1152 39.9085L16.3164 31.5312C16.5586 31.6112 16.8007 31.6798 17.0544 31.737L24.63 39.5084Z"
           fill="black"
-          fill-opacity="0.4"
+          fillOpacity="0.4"
         />
         <path
           opacity="0.3"
           d="M27.8926 19.2686L40.0574 16.4343C40.0344 16.3086 40.0113 16.1828 39.9882 16.0571H27.8926V19.2686Z"
           fill="black"
-          fill-opacity="0.6"
+          fillOpacity="0.6"
         />
         <path
           opacity="0.3"
           d="M30.4306 23.9428L40.0702 16.0686V16.0571L28.2051 23.9428H30.4306Z"
           fill="black"
-          fill-opacity="0.4"
+          fillOpacity="0.4"
         />
         <path
           opacity="0.3"
           d="M36.0796 16.0573L27.3047 38.5373C30.7639 37.2344 33.7619 35.0287 36.0104 32.1944L37.394 16.0459H36.0796V16.0573Z"
           fill="black"
-          fill-opacity="0.6"
+          fillOpacity="0.6"
         />
         <path
           opacity="0.3"
           d="M39.9654 16.0571L27.3047 38.5371C34.9265 35.6914 40.3574 28.4457 40.3574 19.9428C40.3574 18.6171 40.2191 17.3143 39.9654 16.0571Z"
           fill="black"
-          fill-opacity="0.4"
+          fillOpacity="0.4"
         />
         <path d="M32.0566 0H40.0589V7.88569H32.0566V0Z" fill="#798FFF" />
         <path
@@ -97,19 +97,19 @@ export function Logo() {
           opacity="0.3"
           d="M40.0574 6.7885V7.88564L35.6527 11.9656H34.7188V6.7085L40.0574 6.7885Z"
           fill="black"
-          fill-opacity="0.6"
+          fillOpacity="0.6"
         />
         <path
           opacity="0.3"
           d="M27.8926 11.9658V4.263L33.485 3.79443L35.3183 4.27443L27.8926 11.9658Z"
           fill="black"
-          fill-opacity="0.6"
+          fillOpacity="0.6"
         />
         <path
           opacity="0.3"
           d="M31.4556 0.879883L27.8926 4.4913V11.977H32.6432L31.4556 0.879883Z"
           fill="black"
-          fill-opacity="0.6"
+          fillOpacity="0.6"
         />
         <path
           opacity="0.3"
@@ -120,13 +120,13 @@ export function Logo() {
           opacity="0.3"
           d="M32.3431 0H32.0549L30.8672 1.24571L32.2739 2.04571L32.3431 0Z"
           fill="black"
-          fill-opacity="0.6"
+          fillOpacity="0.6"
         />
         <path
           opacity="0.3"
           d="M38.5834 9.39427L35.8046 11.9657H35.3203L35.7469 6.82285L37.9031 6.42285L38.5834 9.39427Z"
           fill="black"
-          fill-opacity="0.6"
+          fillOpacity="0.6"
         />
         <path
           d="M32.043 7.88569H40.0568V0H32.043V7.88569Z"
@@ -166,8 +166,8 @@ export function Logo() {
           y2="7.88318"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#D375FF" />
-          <stop offset="1" stop-color="#798FFF" />
+          <stop stopColor="#D375FF" />
+          <stop offset="1" stopColor="#798FFF" />
         </linearGradient>
         <linearGradient
           id="paint1_linear_379_5771"
@@ -177,8 +177,8 @@ export function Logo() {
           y2="21.6804"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#D375FF" />
-          <stop offset="1" stop-color="#798FFF" />
+          <stop stopColor="#D375FF" />
+          <stop offset="1" stopColor="#798FFF" />
         </linearGradient>
         <linearGradient
           id="paint2_linear_379_5771"
@@ -188,8 +188,8 @@ export function Logo() {
           y2="21.6801"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#D375FF" />
-          <stop offset="1" stop-color="#798FFF" />
+          <stop stopColor="#D375FF" />
+          <stop offset="1" stopColor="#798FFF" />
         </linearGradient>
         <linearGradient
           id="paint3_linear_379_5771"
@@ -199,8 +199,8 @@ export function Logo() {
           y2="21.6804"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#D375FF" />
-          <stop offset="1" stop-color="#798FFF" />
+          <stop stopColor="#D375FF" />
+          <stop offset="1" stopColor="#798FFF" />
         </linearGradient>
         <linearGradient
           id="paint4_linear_379_5771"
@@ -210,8 +210,8 @@ export function Logo() {
           y2="21.6804"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#D375FF" />
-          <stop offset="1" stop-color="#798FFF" />
+          <stop stopColor="#D375FF" />
+          <stop offset="1" stopColor="#798FFF" />
         </linearGradient>
         <linearGradient
           id="paint5_linear_379_5771"
@@ -221,8 +221,8 @@ export function Logo() {
           y2="21.6804"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#D375FF" />
-          <stop offset="1" stop-color="#798FFF" />
+          <stop stopColor="#D375FF" />
+          <stop offset="1" stopColor="#798FFF" />
         </linearGradient>
         <linearGradient
           id="paint6_linear_379_5771"
@@ -232,8 +232,8 @@ export function Logo() {
           y2="38.7501"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#D375FF" />
-          <stop offset="1" stop-color="#798FFF" />
+          <stop stopColor="#D375FF" />
+          <stop offset="1" stopColor="#798FFF" />
         </linearGradient>
         <clipPath id="clip0_379_5771">
           <rect width="113" height="40" fill="white" />

src/components/icons/LogoWithoutText.tsx

@@ -8,8 +8,8 @@ export function LogoWithoutText() {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M16.0068 31.7756C24.7187 31.7756 31.7812 24.6624 31.7812 15.8878C31.7812 14.8132 31.6752 13.7635 31.4733 12.7487H21.9434V19.0483H25.0184C23.7216 22.7909 20.1861 25.476 16.028 25.476C10.7704 25.476 6.50824 21.1832 6.50824 15.8878C6.50824 10.5924 10.7704 6.2996 16.028 6.2996V0H16.0068C7.29484 0 0.232422 7.11322 0.232422 15.8878C0.232422 24.6624 7.29484 31.7756 16.0068 31.7756Z"
         fill="#798FFF"
       />
@@ -21,67 +21,67 @@ export function LogoWithoutText() {
         opacity="0.3"
         d="M14.1721 6.49428C14.766 6.38081 15.3793 6.32141 16.0065 6.32141V0H15.985C14.7151 0 13.4796 0.146971 12.2949 0.424748L14.1721 6.49428Z"
         fill="black"
-        fill-opacity="0.6"
+        fillOpacity="0.6"
       />
       <path
         opacity="0.3"
         d="M5.85411 3.5923L4.87109 17.8592L6.27619 16.5207C6.26785 16.3561 6.26363 16.1905 6.26363 16.0239C6.26363 10.7371 10.5116 6.44454 15.774 6.38605L9.46338 1.3916C8.15979 1.9647 6.94741 2.70757 5.85411 3.5923Z"
         fill="black"
-        fill-opacity="0.6"
+        fillOpacity="0.6"
       />
       <path
         opacity="0.3"
         d="M0.233036 16.068L7.42135 19.9466C6.85231 18.725 6.53463 17.3632 6.53463 15.9272C6.53463 14.4893 6.85318 13.1257 7.42368 11.9028L5.22181 4.40674C2.15036 7.29096 0.232422 11.3855 0.232422 15.9272C0.232422 15.9742 0.232627 16.0211 0.233036 16.068Z"
         fill="black"
-        fill-opacity="0.6"
+        fillOpacity="0.6"
       />
       <path
         opacity="0.3"
         d="M0.232422 15.4311L9.76944 29.7295L20.1824 29.92L16.1202 25.4434C16.0775 25.444 16.0347 25.4443 15.9918 25.4443C10.7435 25.4443 6.48895 21.1903 6.48895 15.9427C6.48895 15.7294 6.49598 15.5177 6.50982 15.3079L0.236835 15.3079C0.235206 15.3489 0.233735 15.39 0.232422 15.4311Z"
         fill="black"
-        fill-opacity="0.6"
+        fillOpacity="0.6"
       />
       <path
         opacity="0.3"
         d="M7.15389 28.9923L13.2217 25.0028C9.29605 23.7888 6.45123 20.2061 6.45123 15.9752C6.45123 15.4316 6.4982 14.8987 6.58839 14.3801L2.55078 24.3784C3.74294 26.2084 5.31302 27.7812 7.15389 28.9923Z"
         fill="black"
-        fill-opacity="0.6"
+        fillOpacity="0.6"
       />
       <path
         opacity="0.3"
         d="M21.1095 30.9426C19.4907 31.4827 17.7562 31.7755 15.9523 31.7755C12.6205 31.7755 9.5255 30.7765 6.95898 29.0657L13.0341 25.0493C13.9614 25.3396 14.9491 25.4962 15.9739 25.4962C16.0118 25.4962 16.0495 25.496 16.0872 25.4956L21.1095 30.9426Z"
         fill="black"
-        fill-opacity="0.6"
+        fillOpacity="0.6"
       />
       <path
         opacity="0.3"
         d="M19.4856 31.3881C18.3496 31.6417 17.1678 31.7755 15.9543 31.7755C15.4285 31.7755 14.9087 31.7504 14.396 31.7013L12.9902 25.0493C13.18 25.1104 13.3724 25.1658 13.5672 25.2154L19.4856 31.3881Z"
         fill="black"
-        fill-opacity="0.4"
+        fillOpacity="0.4"
       />
       <path
         opacity="0.3"
         d="M22.0371 15.3079L31.5481 13.0601C31.5306 12.9586 31.5123 12.8574 31.493 12.7566H22.0371V15.3079Z"
         fill="black"
-        fill-opacity="0.6"
+        fillOpacity="0.6"
       />
       <path
         opacity="0.3"
         d="M24.0147 19.0189L31.5486 12.767C31.5479 12.7636 31.5472 12.7601 31.5465 12.7566L22.2695 19.0189H24.0147Z"
         fill="black"
-        fill-opacity="0.4"
+        fillOpacity="0.4"
       />
       <path
         opacity="0.3"
         d="M28.4374 12.7566L21.5742 30.6159C24.2777 29.583 26.6241 27.8259 28.3767 25.5816L29.4614 12.7566H28.4374Z"
         fill="black"
-        fill-opacity="0.6"
+        fillOpacity="0.6"
       />
       <path
         opacity="0.3"
         d="M31.4792 12.7566L21.5742 30.6159C27.5403 28.3562 31.7812 22.5945 31.7812 15.8436C31.7812 14.7871 31.6773 13.7549 31.4792 12.7566Z"
         fill="black"
-        fill-opacity="0.4"
+        fillOpacity="0.4"
       />
       <path d="M25.2917 0H31.5481V6.26234H25.2917V0Z" fill="#798FFF" />
       <path
@@ -96,19 +96,19 @@ export function LogoWithoutText() {
         opacity="0.3"
         d="M31.5486 5.39675V6.27041L28.1019 9.50937H27.373V5.33447L31.5486 5.39675Z"
         fill="black"
-        fill-opacity="0.6"
+        fillOpacity="0.6"
       />
       <path
         opacity="0.3"
         d="M22.0371 9.50942V3.38461L26.4051 3.01514L27.8365 3.39351L22.0371 9.50942Z"
         fill="black"
-        fill-opacity="0.6"
+        fillOpacity="0.6"
       />
       <path
         opacity="0.3"
         d="M24.8196 0.695801L22.0371 3.56156V9.50947H25.7487L24.8196 0.695801Z"
         fill="black"
-        fill-opacity="0.6"
+        fillOpacity="0.6"
       />
       <path
         opacity="0.3"
@@ -119,13 +119,13 @@ export function LogoWithoutText() {
         opacity="0.3"
         d="M25.5173 0H25.2871L24.3574 0.99057L25.4543 1.62357L25.5173 0Z"
         fill="black"
-        fill-opacity="0.6"
+        fillOpacity="0.6"
       />
       <path
         opacity="0.3"
         d="M30.3896 7.46476L28.2194 9.50937H27.8379L28.1787 5.42173L29.8668 5.10254L30.3896 7.46476Z"
         fill="black"
-        fill-opacity="0.6"
+        fillOpacity="0.6"
       />
       <path
         d="M25.2852 6.26234H31.5485V0H25.2852V6.26234Z"
@@ -140,8 +140,8 @@ export function LogoWithoutText() {
           y2="6.26234"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stop-color="#D375FF" />
-          <stop offset="1" stop-color="#798FFF" />
+          <stop stopColor="#D375FF" />
+          <stop offset="1" stopColor="#798FFF" />
         </linearGradient>
       </defs>
     </svg>

src/components/icons/TelegramIcon.tsx

@@ -9,8 +9,8 @@ export function TelegramIcon() {
     >
       <g opacity="0.8">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M4.35848 15.8486C10.7919 12.8128 15.0923 10.8506 17.2253 9.88797C23.3491 7.14829 24.622 6.66699 25.4477 6.66699C25.6197 6.66699 26.0325 6.70402 26.3077 6.92615C26.5142 7.11127 26.583 7.37042 26.6174 7.55554C26.6518 7.74065 26.6862 8.1479 26.6518 8.48111C26.3077 12.2204 24.8972 21.365 24.1403 25.5486C23.8307 27.3257 23.2114 27.9181 22.6266 27.9921C21.3537 28.1032 20.356 27.0665 19.1175 26.215C17.1909 24.8452 16.09 23.9936 14.1978 22.6608C12.0304 21.1059 13.4409 20.2543 14.6794 18.8845C14.9891 18.5143 20.6656 12.9979 20.7688 12.4796C20.7688 12.4055 20.8032 12.1834 20.6656 12.0723C20.528 11.9612 20.356 11.9983 20.2184 12.0353C20.0119 12.0723 16.9157 14.2937 10.8951 18.6624C10.0006 19.3288 9.20934 19.625 8.48687 19.625C7.69559 19.625 6.18185 19.1437 5.04655 18.7364C3.67042 18.2551 2.56952 17.996 2.67273 17.1815C2.77594 16.7372 3.32639 16.2929 4.35848 15.8486Z"
           fill="white"
         />

src/components/icons/VKIcon.tsx

@@ -9,8 +9,8 @@ export function VKIcon() {
     >
       <g opacity="0.8">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M5.44748 8H2.38424C1.50903 8 1.33398 8.39579 1.33398 8.83368C1.33398 9.61432 2.37198 13.4863 6.16953 18.6072C8.70064 22.1044 12.2671 24 15.5124 24C17.4598 24 17.7004 23.5789 17.7004 22.8539V20.2105C17.7004 19.3684 17.8842 19.2 18.5013 19.2C18.9564 19.2 19.7353 19.4189 21.5522 21.1048C23.6291 23.1032 23.9713 24 25.1397 24H28.203C29.0782 24 29.5158 23.5789 29.2629 22.7478C28.9872 21.92 27.9956 20.7183 26.6792 19.2943C25.9651 18.4825 24.8938 17.6076 24.57 17.1705C24.1149 16.6088 24.2462 16.3587 24.57 15.8594C24.57 15.8594 28.3019 10.8008 28.6922 9.08379C28.8865 8.45895 28.6922 8 27.7645 8H24.7021C23.9232 8 23.5644 8.39579 23.3701 8.83368C23.3701 8.83368 21.8122 12.4867 19.6058 14.8598C18.8916 15.5469 18.5669 15.7659 18.1774 15.7659C17.9831 15.7659 17.7013 15.5469 17.7013 14.9229V9.08379C17.7013 8.33432 17.4746 8 16.8261 8H12.0124C11.5258 8 11.2335 8.34779 11.2335 8.6779C11.2335 9.38779 12.3363 9.552 12.45 11.5495V15.8905C12.45 16.8421 12.2715 17.0147 11.8812 17.0147C10.8432 17.0147 8.3173 13.3448 6.81894 9.14611C6.52486 8.32842 6.22992 8 5.44748 8Z"
           fill="white"
         />

src/components/icons/YoutubeIcon.tsx

@@ -9,8 +9,8 @@ export function YoutubeIcon() {
     >
       <g opacity="0.8">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M26.4181 7.23088C27.5654 7.54116 28.4689 8.45558 28.7756 9.6165C29.3327 11.7209 29.3327 16.1114 29.3327 16.1114C29.3327 16.1114 29.3327 20.502 28.7756 22.6063C28.4689 23.7671 27.5654 24.6816 26.4181 24.9918C24.3384 25.5559 15.9994 25.5559 15.9994 25.5559C15.9994 25.5559 7.66049 25.5559 5.58084 24.9918C4.43357 24.6816 3.5299 23.7671 3.22327 22.6063C2.66602 20.502 2.66602 16.1114 2.66602 16.1114C2.66602 16.1114 2.66602 11.7209 3.22327 9.6165C3.5299 8.45558 4.43357 7.54116 5.58084 7.23088C7.66049 6.66699 15.9994 6.66699 15.9994 6.66699C15.9994 6.66699 24.3384 6.66699 26.4181 7.23088ZM13.7771 12.2224V20.0002L20.4438 16.1114L13.7771 12.2224Z"
           fill="white"
         />

src/consts/statistics.ts

@@ -5,30 +5,35 @@ export const statistics: IStatisticsItem[] = [
     color: '#D375FF',
     percents: 15,
     title: 'AR',
-    columnWidth: 224,
+    height: 224,
+    widthPercents: 67,
   },
   {
     color: '#79FFA6',
     percents: 62,
     title: 'VR',
-    columnWidth: 301,
+    height: 301,
+    widthPercents: 90,
   },
   {
     color: '#9E75FF',
     percents: 97,
     title: '3D интерактив',
-    columnWidth: 373,
+    height: 373,
+    widthPercents: 100,
   },
   {
     color: '#FF7575',
     percents: 64,
-    title: 'Интеактивные макеты',
-    columnWidth: 301,
+    title: 'Интерактивные макеты',
+    height: 301,
+    widthPercents: 90,
   },
   {
     color: '#8F95FF',
     percents: 12,
     title: 'Мобильные приложения',
-    columnWidth: 246,
+    height: 246,
+    widthPercents: 75,
   },
 ];

src/types/IStatisticsItem.ts

@@ -2,5 +2,6 @@ export interface IStatisticsItem {
   title: string;
   color: string;
   percents: number;
-  size: number;
+  widthPercents: number;
+  height: number;
 }