From af02c066f3f64d245492d75941278a2da2a5b2c1 Mon Sep 17 00:00:00 2001
From: Lanskikh <lanskikh-mikhail@mail.ru>
Date: Tue, 20 Aug 2024 14:20:12 +0500
Subject: [PATCH] ellipse waiting

---
 src/components/Layouts/Layout.tsx                  | 3 +--
 src/components/Main/Efficiency.tsx                 | 4 ++--
 src/components/Main/Ellipse.tsx                    | 2 +-
 src/components/Main/Marquee.tsx                    | 2 +-
 src/components/Main/Products/Products.tsx          | 4 +---
 src/components/Main/Products/Tabs/TrainingsTab.tsx | 2 +-
 src/components/Main/Video.tsx                      | 2 +-
 7 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index 2af9fa5..ee3fa79 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -8,11 +8,10 @@ export function Layout() {
   return (
     <>
       <Header />
-      <main className="relative overflow-y-clip">
+      <main className="relative overflow-clip">
         <Outlet />
       </main>
       <Contacts />
-
       <Footer />
       <ModalContainer />
     </>
diff --git a/src/components/Main/Efficiency.tsx b/src/components/Main/Efficiency.tsx
index f47667c..129f04b 100644
--- a/src/components/Main/Efficiency.tsx
+++ b/src/components/Main/Efficiency.tsx
@@ -87,14 +87,14 @@ function Figure({
     <motion.div
       ref={root}
       initial={{
-        backgroundImage: `url(src/assets/efficiency/${type}_variance_figure.svg),url(src/assets/efficiency/efficiency_backlight.svg)`,
+        background: `bottom right 24px/auto url(src/assets/efficiency/${type}_variance_figure.svg) no-repeat, bottom right/100% 0% url(src/assets/efficiency/efficiency_backlight.svg) no-repeat, #3D425C4D`,
         backgroundSize: 'auto,100% 0%',
       }}
       whileHover={{
         backgroundSize: 'auto,100% 100%',
         transition: { duration: 0.075 },
       }}
-      className="flex px-6 bg-[#3D425C4D] 2xl:max-w-[22vw] w-full rounded-2xl pt-6 bg-no-repeat bg-[position:bottom_right_24px,bottom_right] h-[262px]"
+      className="flex px-6 2xl:max-w-[22vw] w-full rounded-2xl pt-6 bg-no-repeat bg-[position:bottom_right_24px,bottom_right] h-[262px] relative before:bg-[#14161F] before:w-full after:h-full after:-mt-6 after:-ml-6 after:absolute after:-z-[9999] after:rounded-2xl"
     >
       <div className="flex flex-col justify-between py-6 max-sm:max-w-[50vw]">
         <h3 className="lg:font-medium l-text 2xl:max-w-[70%]">{title}</h3>
diff --git a/src/components/Main/Ellipse.tsx b/src/components/Main/Ellipse.tsx
index 070d782..e6dd3fa 100644
--- a/src/components/Main/Ellipse.tsx
+++ b/src/components/Main/Ellipse.tsx
@@ -25,7 +25,7 @@ export function Ellipse() {
 
   return (
     <div
-      className="absolute -z-10 bg-[url('src/assets/Ellipse.png')] bg-cover bg-no-repeat bg-center -translate-y-[50%] -translate-x-[50%] aspect-[348.75/262.77] w-[21.75vw] transition-all duration-100"
+      className="absolute -z-10 bg-[url('src/assets/Ellipse.png')] bg-cover bg-no-repeat bg-center -translate-y-[50%] -translate-x-[50%] aspect-[348.75/262.77] w-[21.75vw] transition-all ease-in-out duration-100"
       style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
     />
   );
diff --git a/src/components/Main/Marquee.tsx b/src/components/Main/Marquee.tsx
index 293357c..4c3eeb3 100644
--- a/src/components/Main/Marquee.tsx
+++ b/src/components/Main/Marquee.tsx
@@ -1,6 +1,6 @@
 export function Marquee() {
   return (
-    <div className="flex flex-nowrap w-full overflow-hidden lg:max-h-[100px] sm:max-h-[82px] max-h-20">
+    <div className="flex flex-nowrap w-full overflow-hidden lg:max-h-[100px] sm:max-h-[82px] max-h-20 relative z-10 bg-[#14161F]">
       <div className="flex absolute z-40 right-0 max-sm:hidden">
         <div className="w-0 h-0 lg:border-b-[100px] lg:border-l-[100px] sm:border-b-[82px] sm:border-l-[82px] border-[transparent_transparent_#D0D6DF_transparent]" />
         <div className="lg:w-[260px] sm:w-[216px] bg-[#D0D6DF]" />
diff --git a/src/components/Main/Products/Products.tsx b/src/components/Main/Products/Products.tsx
index 1c3a50c..d92b93b 100644
--- a/src/components/Main/Products/Products.tsx
+++ b/src/components/Main/Products/Products.tsx
@@ -24,8 +24,6 @@ export function Products() {
 
   return (
     <div
-      itemScope
-      itemType="https://graff.training/#products"
       id="products"
       className="lg:py-[70px] sm:max-lg:pt-14 sm:max-lg:pb-8 max-sm:py-14 lg:px-10 sm:px-6 px-4 relative z-10"
     >
@@ -37,7 +35,7 @@ export function Products() {
         <MiniTitle className="lg:hidden" text="Продукты" />
         <div
           className={
-            'relative z-30 flex gax-y-4 bg-[#3D425C4D] bg-opacity-3 [&::-webkit-scrollbar]:hidden rounded-xl p-1 mb-2 w-fit max-w-full overflow-auto sm:max-lg:mt-[13px] mt-6' +
+            'relative flex gax-y-4 bg-[#14161F] before:bg-[#3D425C4D] before:absolute before:w-full before:h-full before:-m-1 [&::-webkit-scrollbar]:hidden rounded-xl p-1 mb-2 w-fit max-w-full overflow-auto sm:max-lg:mt-[13px] mt-6' +
             (curTab !== 2
               ? ' max-[912px]:[-webkit-mask-image:_linear-gradient(to_left,rgba(32,35,50,0)_0%,rgba(32,35,50,1)_20%)]'
               : '')
diff --git a/src/components/Main/Products/Tabs/TrainingsTab.tsx b/src/components/Main/Products/Tabs/TrainingsTab.tsx
index 8ebe0f5..ec6357f 100644
--- a/src/components/Main/Products/Tabs/TrainingsTab.tsx
+++ b/src/components/Main/Products/Tabs/TrainingsTab.tsx
@@ -5,7 +5,7 @@ import { useInView } from 'framer-motion';
 
 export function TrainingsTab() {
   return (
-    <div className="bg-[#3D425C4D] rounded-xl lg:aspect-[1520/546] sm:aspect-[720/460] lg:h-[max(534px,34vw)] md:h-[min(460px,60vw)] sm:h-[max(460px,60vw)] w-full lg:bg-[url('src/assets/products/trainings/trainings.png')] 2xl:bg-[length:70%] bg-right-bottom lg:bg-[length:55%] lg:p-10 sm:p-7 p-5 bg-no-repeat">
+    <div className="bg-[#14161F] before:bg-[#3D425C4D] before:absolute before:w-full before:h-full before:rounded-xl lg:before:-m-10 rounded-xl lg:aspect-[1520/546] sm:aspect-[720/460] lg:h-[max(534px,34vw)] md:h-[min(460px,60vw)] sm:h-[max(460px,60vw)] w-full lg:bg-[url('src/assets/products/trainings/trainings.png')] 2xl:bg-[length:70%] bg-right-bottom lg:bg-[length:55%] lg:p-10 sm:p-7 p-5 bg-no-repeat">
       <div className="lg:max-w-[max(455px,28vw)]">
         <div className="sm:max-lg:border-b border-[#3D425C] sm:max-lg:bg-[url('src/assets/products/trainings/trainings.png')] bg-no-repeat md:bg-contain bg-right-bottom sm:bg-[length:40%]">
           <div className="sm:max-lg:max-w-[51vw] max-sm:border-b border-[#3D425C]">
diff --git a/src/components/Main/Video.tsx b/src/components/Main/Video.tsx
index 89f08c6..9d2de12 100644
--- a/src/components/Main/Video.tsx
+++ b/src/components/Main/Video.tsx
@@ -22,7 +22,7 @@ export function Video() {
         >
           <PlayIcon className="lg:w-[114px] sm:w-[94px] outline-none" />
         </button>
-        <div className="flex self-end absolute z-0 right-0 max-sm:hidden">
+        <div className="flex self-end absolute right-0 max-sm:hidden -z-30">
           <div className="w-0 h-0 lg:border-b-[100px] lg:border-l-[100px] sm:border-b-[82px] sm:border-l-[82px] border-[transparent_transparent_#14161F_transparent]" />
           <div className="lg:w-[260px] sm:w-[216px] mobile bg-[#14161F]" />
         </div>