refactoring, fixes

src/components/Layout/Footer.tsx

@@ -11,11 +11,11 @@ export function Footer() {
         <div className="flex flex-col gap-y-1">
           <Link
             to="https://graff.tech/privacypolicy"
-            className="text-[#ffffff] sm:font-medium flex gap-4 m-text"
+            className="sm:font-medium flex gap-4 m-text"
           >
             Политика конфиденциальности <span>graff.tech</span>
           </Link>
-          <p className="opacity-40 text-[#ffffff] sm:font-medium m-text">
+          <p className="opacity-40 sm:font-medium m-text">
             © 2024 GRAFF interactive. Все права защищены
           </p>
         </div>
@@ -25,7 +25,7 @@ export function Footer() {
           <Contact type="email" text="info@graff.tech" />
           <Contact type="phone" text="+7 800 770 00 67" />
         </div>
-        <div className="text-[#ffffff] font-medium p-[14px] border border-[#3D425C] rounded-full m-text">
+        <div className="font-medium p-[14px] border border-[#3D425C] rounded-full m-text">
           RU
         </div>
       </div>
@@ -34,7 +34,7 @@ export function Footer() {
           <Contact type="email" text="info@graff.tech" />
           <Contact type="phone" text="+971 58 506 0097" />
         </div>
-        <div className="text-[#ffffff] font-medium py-[14px] px-[10px] border border-[#3D425C] rounded-full m-text">
+        <div className="font-medium py-[14px] px-[10px] border border-[#3D425C] rounded-full m-text">
           UAE
         </div>
       </div>
@@ -57,7 +57,7 @@ function Contact({
         href={
           type === 'email' ? `mailto:${text}` : `tel:${text.replace(' ', '')}`
         }
-        className={'text-[#ffffff] l-text ' + className}
+        className={' l-text ' + className}
       >
         {text}
       </a>

src/components/Layout/Header.tsx

@@ -98,7 +98,7 @@ function BurgerAnchor({
   return (
     <HashLink
       to={route}
-      className="flex items-center px-10 py-6 gap-1 text-[#ffffff] btn-text bg-[#14161F] w-full last:border-b-0 [&:not(:last-child)]:border-b sm:border-l font-semibold border-[#3D425C] hover:bg-[#3D425C] active:bg-[#14161F]"
+      className="flex items-center px-10 py-6 gap-1 btn-text bg-[#14161F] w-full last:border-b-0 [&:not(:last-child)]:border-b sm:border-l font-semibold border-[#3D425C] hover:bg-[#3D425C] active:bg-[#14161F]"
     >
       <CubeIcon />
       {children}
@@ -112,7 +112,7 @@ function ChooseLang({ lang }: { lang: 'RU' | 'EN' }) {
     <button
       onClick={() => updateLang(lang)}
       className={
-        'text-[#ffffff] min-h-[72px] w-full h-full btn-text font-semibold bg-[#14161F] hover:bg-[#3D425C] border active:bg-[#14161F] ' +
+        'min-h-[72px] w-full h-full btn-text font-semibold bg-[#14161F] hover:bg-[#3D425C] border active:bg-[#14161F] ' +
         (value === lang
           ? '[border-image:linear-gradient(to_right,#798FFF,#D375FF)_3]'
           : 'border-[#3D425C]')
@@ -135,7 +135,7 @@ function LangToggler({ lang }: { lang: Lang }) {
     >
       <button
         onClick={() => setOpen(prev => !prev)}
-        className="mx-6 h-full gap-x-1 items-center flex text-[#ffffff] font-semibold btn-text"
+        className="mx-6 h-full gap-x-1 items-center flex  font-semibold btn-text"
       >
         {lang}
         <ArrowDownIcon />

src/components/Layout/Motivation.tsx

@@ -2,7 +2,7 @@ import { Marquee } from '../Main/Marquee';
 
 export function Motivation() {
   return (
-    <header className="text-[#ffffff]">
+    <header>
       <div className="lg:px-10 sm:px-6 mobile:px-4 lg:py-28 sm:py-12 mobile:py-14">
         <h1 className="desktop-figma:mb-[38px] pb-8 font-medium lg:block mobile:max-lg:hidden h1">
           Создаем{' '}

src/components/Main/Availables.tsx

@@ -72,19 +72,12 @@ function MultiUserFeature({
         backgroundImage: 'url(src/assets/efficiency_backlight.svg)',
         backgroundSize: '100% 100%',
       }}
-      initial={{
-        backgroundSize: '0% 0%',
-      }}
-      animate={{
-        backgroundImage: 'url(src/assets/efficiency_backlight.svg)',
-        backgroundSize: '100% 0%',
-      }}
       transition={{ duration: 0.075 }}
       ref={ref}
-      className="bg-right-bottom bg-no-repeat flex flex-col desktop-figma:max-w-[22vw] w-full justify-between items-start p-6 bg-[#3D425C4D] rounded-2xl lg:min-h-[214px] sm:min-h-[240px] mobile:min-h-[220px]"
+      className="bg-right-bottom bg-no-repeat flex flex-col bg-[length:100%_0%] desktop-figma:max-w-[22vw] w-full justify-between items-start p-6 bg-[#3D425C4D] rounded-2xl lg:min-h-[214px] sm:min-h-[240px] mobile:min-h-[220px]"
     >
       {getIcon(type, hovered, 'mb-4')}
-      <p className="l-text text-[#ffffff] desktop-figma:max-w-[70%]">{text}</p>
+      <p className="l-text desktop-figma:max-w-[70%]">{text}</p>
     </motion.div>
   );
 }

src/components/Main/Decreasing.tsx

@@ -51,7 +51,7 @@ export function Decreasing() {
 }
 
 function Plus({ text }: { text: string }) {
-  return <p className="text-[#ffffff] l-text">{text}</p>;
+  return <p className="l-text">{text}</p>;
 }
 
 function Number({ text }: { text: string }) {

src/components/Main/Distance.tsx

@@ -10,7 +10,7 @@ export function Distance() {
       </Title>
       <div className="xl:pl-64">
         <div className="sm:grid lg:gap-x-4 lg:gap-y-6 sm:gap-x-3 sm:gap-y-4 lg:grid-cols-2 md:max-[956px]:grid-cols-[446px_1fr]">
-          <p className="text-[#ffffff] row-start-1 mobile:max-sm:mb-6 l-text">
+          <p className="row-start-1 mobile:max-sm:mb-6 l-text">
             Обучающиеся будут получать доступ к системе с высоко
             детализированной 3D графикой для прохождения сценариев на любом
             устройстве, без необходимости установки дополнительного ПО.

src/components/Main/Efficiency.tsx

@@ -64,7 +64,7 @@ function Figure({
 
   const motionValue = useMotionValue<number>(0);
   const springValue = useSpring(motionValue, { damping: 100, stiffness: 100 });
-  const isInView = useInView(root, { once: true, margin: '-100px' });
+  const isInView = useInView(root, { once: true, margin: '-200px' });
 
   useEffect(() => {
     if (isInView) {
@@ -83,21 +83,17 @@ function Figure({
   return (
     <motion.div
       ref={root}
-      whileHover={{
-        backgroundImage: `url(src/assets/${type}_variance_figure.svg),url(src/assets/efficiency_backlight.svg)`,
-        backgroundSize: 'auto,100% 100%',
-      }}
       initial={{
-        backgroundImage: `url(src/assets/${type}_variance_figure.svg)`,
-      }}
-      animate={{
         backgroundImage: `url(src/assets/${type}_variance_figure.svg),url(src/assets/efficiency_backlight.svg)`,
         backgroundSize: 'auto,100% 0%',
       }}
-      transition={{ duration: 0.075 }}
+      whileHover={{
+        backgroundSize: 'auto,100% 100%',
+        transition: { duration: 0.075 },
+      }}
       className="flex px-6 bg-[#3D425C4D] desktop-figma:max-w-[22vw] w-full rounded-2xl pt-6 bg-no-repeat bg-[position:bottom_right_24px,bottom_right] h-[262px]"
     >
-      <div className="text-[#ffffff] flex flex-col justify-between py-6 mobile:max-sm:max-w-[50vw]">
+      <div className="flex flex-col justify-between py-6 mobile:max-sm:max-w-[50vw]">
         <h3 className="lg:font-medium l-text desktop-figma:max-w-[70%]">
           {title}
         </h3>

src/components/Main/Events.tsx

@@ -60,9 +60,7 @@ function EventTitle({
   className = '',
   children,
 }: PropsWithChildren<{ className?: string }>) {
-  return (
-    <h3 className={'text-[#ffffff] font-medium h3 ' + className}>{children}</h3>
-  );
+  return <h3 className={' font-medium h3 ' + className}>{children}</h3>;
 }
 
 function LinkButton({ href }: { href: string }) {
@@ -74,7 +72,7 @@ function LinkButton({ href }: { href: string }) {
       <Link
         to={href}
         ref={ref}
-        className="text-[#ffffff] text-nowrap opacity-60 uppercase flex items-center w-fit lg:min-w-[min(133px,fit)] gap-x-2 sm:max-lg:min-w-[140px] mobile:max-sm:self-end link mobile:max-sm:mt-4"
+        className=" text-nowrap opacity-60 uppercase flex items-center w-fit lg:min-w-[min(133px,fit)] gap-x-2 sm:max-lg:min-w-[140px] mobile:max-sm:self-end link mobile:max-sm:mt-4"
       >
         как это было <ArrowInsertIcon />
       </Link>

src/components/Main/ProductTabs/ForTeachingTab.tsx

@@ -6,7 +6,7 @@ export function ForTeachingTab() {
   return (
     <div className="lg:bg-[url('src/assets/mask_group2.png')] lg:aspect-[1520/546] sm:max-lg:aspect-[720/460] w-full lg:h-[max(534px,34vw)] md:max-lg:h-[min(460px,60vw)] sm:max-md:h-[max(460px,60vw)] mobile:max-sm:min-h-[746pxsdf] bg-[#3D425C4D] bg-no-repeat lg:p-10 sm:p-7 mobile:p-5 rounded-xl 2xl:bg-contain bg-right lg:max-2xl:bg-[length:50%]">
       <div className='sm:max-lg:bg-[url("src/assets/mask_group2.png")] bg-no-repeat bg-right bg-[length:50%] sm:max-lg:pb-[55px] mobile:max-lg:border-b border-[#3D425C] sm:mb-8 mobile:mb-4'>
-        <h3 className="text-[#ffffff] font-medium lg:max-w-[455px] sm:max-w-[326px] mobile:max-sm:mb-0 h3">
+        <h3 className=" font-medium lg:max-w-[455px] sm:max-w-[326px] mobile:max-sm:mb-0 h3">
           Интерактивные тренажеры для учебных заведений
         </h3>
         <img
@@ -27,7 +27,7 @@ export function ForTeachingTab() {
               поломки оборудования, а также экономить на расходных средствах"
         />
       </div>
-      <h4 className="text-[#ffffff] font-medium lg:max-w-[408px] l-text">
+      <h4 className=" font-medium lg:max-w-[408px] l-text">
         Оснащение учебных классов и центров всем необходимым для современного
         обучения под «ключ»
       </h4>
@@ -57,11 +57,9 @@ function ForTeachingOption({
       <div className="lg:pl-4 sm:pl-[13px] sm:border-l border-[#3D425C]">
         <div className="flex mobile:max-sm:items-center sm:items-start sm:max-lg:flex-col gap-x-2 mb-2">
           <ServiceIcon animated={hovered} className="lg:hidden min-w-11" />
-          <h4 className="text-[#ffffff] font-medium l-text">{title}</h4>
+          <h4 className=" font-medium l-text">{title}</h4>
         </div>
-        <p className="text-[#ffffff] opacity-60 lg:font-medium m-text">
-          {description}
-        </p>
+        <p className=" opacity-60 lg:font-medium m-text">{description}</p>
       </div>
     </div>
   );

src/components/Main/ProductTabs/SimulatorsTab.tsx

@@ -53,7 +53,7 @@ export function SimulatorsTab() {
       <div className="flex sm:justify-between w-full h-full mobile:max-sm:flex-col mobile:max-sm:justify-between items-center gap-x-2">
         <div className="lg:max-w-[539px] sm:max-w-[50vw] self-start flex flex-col sm:max-lg:justify-between sm:max-lg:h-full">
           <div className="flex flex-col">
-            <h3 className="sm:max-lg:max-w-[455px] text-[#ffffff] font-medium h3 lg:mb-8 sm:mb-6 mobile:mb-5">
+            <h3 className="sm:max-lg:max-w-[455px]  font-medium h3 lg:mb-8 sm:mb-6 mobile:mb-5">
               Интерактивные симуляторы управления техникой
             </h3>
             <ul className="flex flex-wrap mobile:max-sm:grid lg:gap-2 mobile:max-lg:gap-1 lg:mb-12 mobile:max-sm:mb-5 sm:max-lg:max-w-[325px]">
@@ -66,11 +66,11 @@ export function SimulatorsTab() {
             </ul>
           </div>
           <div className="sm:max-lg:max-w-[455px]">
-            <h4 className="text-[#ffffff] font-medium l-text lg:mb-2 mobile:max-sm:mb-3">
+            <h4 className="font-medium l-text lg:mb-2 mobile:max-sm:mb-3">
               В основу симуляторов заложена математическая модель, полностью
               соответствующая работе настоящего оборудования
             </h4>
-            <p className="sm:max-lg:hidden text-[#ffffff] mb-5 opacity-60 m-text">
+            <p className="sm:max-lg:hidden  mb-5 opacity-60 m-text">
               модель позволяет производить расчеты характеристик работы,
               отслеживать безопасность работы устройств и симулировать
               внештатные ситуации.
@@ -140,7 +140,7 @@ export function SimulatorsTab() {
               )}
             </div>
           </div>
-          <p className="lg:hidden mobile:max-sm:hidden text-[#ffffff] opacity-60 m-text">
+          <p className="lg:hidden mobile:max-sm:hidden  opacity-60 m-text">
             модель позволяет производить расчеты характеристик работы,
             отслеживать безопасность работы устройств и симулировать внештатные
             ситуации.
@@ -153,7 +153,7 @@ export function SimulatorsTab() {
 
 function SimulatorsItem({ text }: { text: string }) {
   return (
-    <li className="text-[#ffffff] l-text bg-[#3D425C4D] rounded-[44px] w-fit lg:px-5 lg:py-2 mobile:px-4 mobile:py-[6px]">
+    <li className=" l-text bg-[#3D425C4D] rounded-[44px] w-fit lg:px-5 lg:py-2 mobile:px-4 mobile:py-[6px]">
       {text}
     </li>
   );

src/components/Main/ProductTabs/TrainingsTab.tsx

@@ -8,7 +8,7 @@ export function TrainingsTab() {
       <div className="lg:max-w-[max(455px,28vw)]">
         <div className="sm:max-lg:border-b border-[#3D425C] sm:max-lg:bg-[url('src/assets/mask_group.png')] bg-no-repeat bg-contain bg-right-bottom sm:max-md:bg-[length:40%]">
           <div className="sm:max-lg:max-w-[51vw] mobile:max-sm:border-b border-[#3D425C]">
-            <h3 className="text-[#ffffff] font-medium lg:mb-8 sm:max-lg:mb-28 h3">
+            <h3 className=" font-medium lg:mb-8 sm:max-lg:mb-28 h3">
               Промышленные тренажеры виртуальной реальности
             </h3>
             <img
@@ -63,11 +63,11 @@ function TeachingItem({
         'mobile:max-sm:hidden sm:max-lg:mb-[14px] min-w-11',
       )}
       <div className="lg:border-l border-[#3D425C] lg:pl-4">
-        <h4 className="text-[#ffffff] flex items-center gap-x-2 font-medium l-text mb-2">
+        <h4 className=" flex items-center gap-x-2 font-medium l-text mb-2">
           {getIcon(iconType, hovered, 'sm:hidden min-w-11')}
           {title}
         </h4>
-        <p className="text-[#ffffff] m-text opacity-60">{text}</p>
+        <p className=" m-text opacity-60">{text}</p>
       </div>
     </div>
   );

src/components/Main/Products.tsx

@@ -80,7 +80,7 @@ function TabButton({
     <button
       onClick={onClick}
       className={
-        'text-[#ffffff] font-semibold rounded-lg px-5 py-[13.5px] btn-text text-nowrap text-clip bg-text-gradient relative ' +
+        ' font-semibold rounded-lg px-5 py-[13.5px] btn-text text-nowrap text-clip bg-text-gradient relative ' +
         className
       }
     >

src/components/Main/Projects.tsx

@@ -56,12 +56,12 @@ function Project({
         style={{ backgroundImage: `url(${src})` }}
       />
       <div className="p-5">
-        <h4 className="text-[#ffffff] font-medium h4">{title}</h4>
+        <h4 className=" font-medium h4">{title}</h4>
         <div className="flex gap-2 mt-4">
           {tags.map(tag => (
             <p
               key={tag}
-              className="text-[#ffffff] opacity-80 font-medium rounded-3xl py-3 px-4 border border-[#798FFF] m-text"
+              className=" opacity-80 font-medium rounded-3xl py-3 px-4 border border-[#798FFF] m-text"
             >
               {tag}
             </p>

src/components/Main/Teaching.tsx

@@ -191,9 +191,5 @@ function TeachingFeatureDescription({
 }: PropsWithChildren<{
   className?: string;
 }>) {
-  return (
-    <p className={'l-text text-[#ffffff] opacity-60 ' + className}>
-      {children}
-    </p>
-  );
+  return <p className={'l-text  opacity-60 ' + className}>{children}</p>;
 }

src/components/Main/Trainings.tsx

@@ -63,10 +63,8 @@ function TrainingsFeature({
         className="lg:first:h-[200px] lg:last:h-[200px] lg:h-[176px] sm:flex items-stretch justify-between sm:py-10 mobile:max-sm:pt-5"
       >
         <div className="sm:flex flex-col gap-y-4 mobile:max-sm:mb-[42px] md:w-[43.7%] sm:max-md:min-w-[76%]">
-          <h3 className="font-medium text-[#ffffff] mobile:max-sm:mb-2 h3">
-            {title}
-          </h3>
-          <p className="text-[#ffffff] opacity-60 l-text">{text}</p>
+          <h3 className="font-medium  mobile:max-sm:mb-2 h3">{title}</h3>
+          <p className=" opacity-60 l-text">{text}</p>
         </div>
         <div className="mobile:max-sm:flex sm:hidden justify-between items-end">
           <p className="text-[#52587A] m-text mb-5">{order}</p>

src/ui/AnchorLink.tsx

@@ -12,7 +12,7 @@ export function AnchorLink({
   return (
     <HashLink
       className={
-        'text-[#ffffff] btn-text font-semibold border-l border-[#3D425C] mobile:hidden py-[30px] px-10 min-[1350px]:block  hover:bg-[#3D425C] active:bg-[#14161F] ' +
+        'btn-text font-semibold border-l border-[#3D425C] mobile:hidden py-[30px] px-10 min-[1350px]:block  hover:bg-[#3D425C] active:bg-[#14161F] ' +
         className
       }
       to={route}

src/ui/AppearanceText.tsx

@@ -42,7 +42,7 @@ export function AppearanceText({
   className?: string;
 }) {
   return (
-    <h3 className={'text-[#ffffff] font-medium h3 ' + className}>
+    <h3 className={'font-medium h3 ' + className}>
       {splits.map((text, index) => (
         <AppearanceItem key={text} text={text} order={index} />
       ))}

src/ui/MiniTitle.tsx

@@ -10,7 +10,7 @@ export function MiniTitle({
   return (
     <h2
       className={
-        'flex gap-1 items-start self-start text-[#ffffff] uppercase opacity-80 font-medium link lg:max-w-64 xl:w-full ' +
+        'flex gap-1 items-start self-start uppercase opacity-80 font-medium link lg:max-w-64 xl:w-full ' +
         className
       }
     >

src/ui/Title.tsx

@@ -4,7 +4,5 @@ export function Title({
   children,
   className = '',
 }: PropsWithChildren<{ className?: string }>) {
-  return (
-    <h2 className={'font-medium text-[#ffffff] h2 ' + className}>{children}</h2>
-  );
+  return <h2 className={'font-medium h2 ' + className}>{children}</h2>;
 }