ellipse waiting

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

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>

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

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

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%)]'
               : '')

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

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>