main page changes

2024-03-21 03:01:53 +03:00
parent 6d02c56ed4
commit 3591fb4bd0
11 changed files with 111 additions and 82 deletions
--- a/modules/home/citiesCard/citiesCard.module.scss
+++ b/modules/home/citiesCard/citiesCard.module.scss
@@ -81,7 +81,7 @@
    display: flex;
    flex-direction: row;
    right: -280px;
-    bottom: 100px;
+    bottom: 300px;
    transform-origin: right center;
    transform: rotate(356deg);
    gap: 9px;
@@ -110,7 +110,7 @@
        bottom: 200px;
    }
    .bigCitiesLine {
-        bottom: 50px;
+        bottom: 150px;
    }
 }

@@ -129,4 +129,20 @@
    .bigCitiesLine svg {
        width: 200px;
    }
+}
+
+@media (max-width: 500px) {
+    .card {
+        height: 390px;
+    }
+    .smallCitiesLine {
+        bottom: 160px;
+
+        svg {
+            width: 170px;
+        }
+    }
+    .bigCitiesLine {
+        bottom: 75px;
+    }
 }
--- a/modules/home/citiesCard/citiesCard.tsx
+++ b/modules/home/citiesCard/citiesCard.tsx
@@ -9,7 +9,7 @@ import CityBigEn from '@/assets/images/city-big-en.svg';
 import CityPolotskSmallRu from '@/assets/images/city-polotsk-small-ru.svg';
 import CityNovopolotskSmallRu from '@/assets/images/city-novopolotsk-small-ru.svg';
 import CityBigRu from '@/assets/images/city-big-ru.svg';
-import maskUrl from '@/assets/images/cities-star-mask.svg?url';
+import Mask from '@/assets/images/cities-star-mask.svg';
 import ridebusImage from '@/assets/images/cities-backdrop.jpg';
 import Image from 'next/image';
 import useFrame from '@/utils/useFrame';
@@ -104,13 +104,12 @@ function BigCitiesLine() {

 export function CitiesCard() {
  const t = useLocale(locales);
-  const ridebusImageMaskRef = useRef<HTMLDivElement>(null);
+  const ridebusImageMask = useRef<HTMLDivElement>(null);
  const ridebusImageRef = useRef<HTMLDivElement>(null);

  useFrame((delta, time) => {
-    if (ridebusImageMaskRef.current && ridebusImageRef.current) {
-      ridebusImageMaskRef.current.style.transform = `rotate(${-(time * 0.005) % 360}deg) translate3D(0px, 0px, 0px)`;
-      ridebusImageRef.current.style.transform = `rotate(${(time * 0.005) % 360}deg) translate3D(0px, 0px, 0px)`;
+    if (ridebusImageMask.current) {
+      ridebusImageMask.current.style.transform = `rotate(${-(time * 0.005) % 360}deg) translate3D(0px, 0px, 0px)`;
    }
  });

@@ -123,24 +122,10 @@ export function CitiesCard() {
      classes={{ subtitle: styles.description, title: styles.title }}
    >
      <div className={styles.mockupPhoneContainer}>
-        <div
-          className={styles.ridebusImageMask}
-          ref={ridebusImageMaskRef}
-          style={{
-            maskImage: `url(${maskUrl.src})`,
-          }}>
-          <div ref={ridebusImageRef} className={styles.ridebusImageAnchor}>
-            <Image
-              className={styles.ridebusImage}
-              height={800}
-              width={800}
-              placeholder="blur"
-              alt=""
-              src={ridebusImage}
-            />
-          </div>
+        <div className={styles.ridebusImageMask}
+          ref={ridebusImageMask}>
+          <Mask />
        </div>
-        <SmallCitiesLine />
        <BigCitiesLine />
      </div>
    </Card>
--- a/modules/home/header.tsx
+++ b/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>
  );
 }
--- a/modules/home/home.module.scss
+++ b/modules/home/home.module.scss
@@ -96,16 +96,14 @@
    top: 20vh;
    left: -125px;
    z-index: 0;
-    mask-repeat: no-repeat;
-    mask-size: contain;
-    mask-position: 50%;
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
+    color: #1d4fac;
  
-    img {
+    div {
      position: absolute;
      width: 400px;
      height: 400px;
@@ -114,18 +112,22 @@
 }
  
 .thickRoundStar5 {
-    position: relative;
-    max-width: 1500px;
-    width: 100%;
-    margin: auto;
-    z-index: 100000;
+    position: absolute;
+    top: 50vh;
+    right: -100px;
+    z-index: 0;
+    width: 250px;
+    height: 250px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #715573;
  
    div {
      position: absolute;
-      top: -50px;
-      right: 50px;
-      transform: translate(-50%, -50%) rotate(-10deg);
-      color: #9f7ea1;
+      width: 400px;
+      height: 400px;
+      object-fit: contain;
    }
 }
  
@@ -256,6 +258,13 @@
      left: -62px;
      top: 8vh;
    }
+
+    .thickRoundStar5 {
+      width: 125px;
+      height: 125px;
+      right: -48px;
+      top: 74vh;
+    }
 }
  
@media screen and (max-width: 500px) {