main page changes

modules/home/header.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import { manrope, caveat } from '@/styles/fonts';
 import ThinStarBig from '@/assets/images/thin-star-big.svg';
 import ThickRoundStar5 from '@/assets/images/thick-round-star-5.svg';
-import thickRoundStar6Url from '@/assets/images/thick-round-star-6.svg?url';
+import ThickRoundStar6 from '@/assets/images/thick-round-star-6.svg';
 import ridebusFlat from '@/assets/images/cities-backdrop.jpg';
 import Image from 'next/image';
 import { Gradients } from '@/components/gradients';
@@ -22,12 +22,7 @@ const locales: LocalesMap = {
         <span>Приложение,</span>
         <span>которое</span>
         <span>поможет</span>
-        <div>
-          <span>вам</span>
-          <div className={styles.thinStarBig}>
-            <ThinStarBig />
-          </div>
-        </div>
+        <span>вам</span>
         <span>с</span>
         <span className={styles.spendWord}>лёгкостью</span>
         <span>смотреть</span>
@@ -43,12 +38,7 @@ const locales: LocalesMap = {
         <span>app</span>
         <span>that</span>
         <span>helps</span>
-        <div>
-          <span>you</span>
-          <div className={styles.thinStarBig}>
-            <ThinStarBig />
-          </div>
-        </div>
+        <span>you</span>
         <span className={styles.spendWord}>conveniently</span>
         <span>view</span>
         <span className={clsx(caveat.className, styles.wiselyWord)}>
@@ -69,8 +59,7 @@ export default function Header() {
   const t = useLocale(locales);
   const sloganLineRef = useRef<HTMLSpanElement>(null);
   const transitionToBackgoundRef = useRef<HTMLDivElement>(null);
-  const thickRoundStar6MaskRef = useRef<HTMLDivElement>(null);
-  const thickRoundStar6ImageRef = useRef<HTMLImageElement>(null);
+  const thickRoundStar6 = useRef<HTMLDivElement>(null);
   const thickRoundStar5 = useRef<HTMLDivElement>(null);
   const breakpoint600 = false;//useMediaQuery('(max-width: 600px)');
 
@@ -91,16 +80,12 @@ export default function Header() {
       transitionToBackgoundRef.current.style.height = `${scrollY + 300}px`;
     }
 
-    if (thickRoundStar6MaskRef.current && scrollY - 300 < window.innerHeight) {
-      thickRoundStar6MaskRef.current.style.transform = `translate3D(0px, ${scrollY / 6}px, 0px) rotate(${scrollY / 8 + (time * 0.01) % 360}deg)`;
-    }
-
-    if (thickRoundStar6ImageRef.current && scrollY - 300 < window.innerHeight) {
-      thickRoundStar6ImageRef.current.style.transform = `rotate(${-scrollY / 8 - (time * 0.01) % 360}deg) translate3d(0,0,0)`;
+    if (thickRoundStar6.current && scrollY - 300 < window.innerHeight) {
+      thickRoundStar6.current.style.transform = `translate3D(0px, ${scrollY / 2}px, 0px) rotate(${scrollY / 8 + (time * 0.01) % 360}deg)`;
     }
 
     if (thickRoundStar5.current && scrollY - 300 < window.innerHeight) {
-      thickRoundStar5.current.style.transform = `translate3D(-50%, -50%,0) rotate(${-scrollY / 6 - 10}deg)`;
+      thickRoundStar5.current.style.transform = `translate3D(0px, ${scrollY / 8}px, 0px) rotate(${scrollY / 8 + (time * 0.01) % 360}deg)`;
     }
   }, { accelerator: 0.06 });
 
@@ -108,19 +93,13 @@ export default function Header() {
     <Fragment>
       <header className={styles.header}>
         <TopBar />
-        <div
-          className={styles.thickRoundStar6}
-          ref={thickRoundStar6MaskRef}
-          style={{ maskImage: `url(${thickRoundStar6Url.src})` }}
-        >
-          <Image
-            ref={thickRoundStar6ImageRef}
-            height={400}
-            width={400}
-            placeholder="blur"
-            alt=""
-            src={ridebusFlat}
-          />
+        <div className={styles.thickRoundStar6}
+          ref={thickRoundStar6}>
+          <ThickRoundStar6 />
+        </div>
+        <div className={styles.thickRoundStar5}
+          ref={thickRoundStar5}>
+          <ThickRoundStar5 />
         </div>
         <h1 className={clsx(styles.slogan, manrope.className)}>
           <span ref={sloganLineRef} className={styles.line1}>
@@ -128,11 +107,6 @@ export default function Header() {
           </span>
         </h1>
       </header>
-      <div className={styles.thickRoundStar5}>
-        <div ref={thickRoundStar5}>
-          <ThickRoundStar5 />
-        </div>
-      </div>
     </Fragment>
   );
 }