diff --git a/app/components/sections/HeroSection.jsx b/app/components/sections/HeroSection.jsx index c16dc88..36cf42a 100644 --- a/app/components/sections/HeroSection.jsx +++ b/app/components/sections/HeroSection.jsx @@ -15,10 +15,9 @@ export default function HeroSection() { const windowWidth = window.innerWidth const scrollerWidth = scroller.current.scrollWidth const cursor = scroller.current.scrollLeft / (scrollerWidth - windowWidth) * 100 - const scrolBy = 50 - cursor * 1 + const scrolBy = 50 - cursor * 1.1 if (scrolBy < 0) { - console.log("-") elementToScroll.current.style.transform = `translate(-50%, ${-scrolBy}%)` } else { elementToScroll.current.style.transform = `translate(-50%, -${scrolBy}%)` @@ -38,37 +37,41 @@ export default function HeroSection() { return (
- {isMobie === false && <> - Zdjęcie na łonie natury z modelami Jazba -
-

Wyraź Swoją Indywidalność

-

Kolekcja ubrań z wyjątkowymi haftami.
Znajdź swoją Jazbe lub stwórz ją z nami.

- Przeglądaj Nasze Wzory - Stwórz Swoją Jazbe -
- } + {isMobie === false && + <> + Zdjęcie na łonie natury z modelami Jazba +
+

Wyraź Swoją Indywidalność

+

Kolekcja ubrań z wyjątkowymi haftami.
Znajdź swoją Jazbe lub stwórz ją z nami.

+ Przeglądaj Nasze Wzory + Stwórz Swoją Jazbe +
+ } {isMobie && <>
-
-

Wyraź Swoją Indywidalność

-

Kolekcja ubrań z wyjątkowymi haftami.
Znajdź swoją Jazbe lub stwórz ją z nami.

- Przeglądaj Nasze Wzory - Stwórz Swoją Jazbe -
Zdjęcie na łonie natury z modelami Jazba
+
+

Wyraź Swoją Indywidalność

+

Kolekcja ubrań z wyjątkowymi haftami.
Znajdź swoją Jazbe lub stwórz ją z nami.

+ Przeglądaj Nasze Wzory + Stwórz Swoją Jazbe +
+ Przesuń zdjęcie palcem →
}
diff --git a/app/styles/components/sections/heroSection.module.css b/app/styles/components/sections/heroSection.module.css index 4281dc4..23a9b8e 100644 --- a/app/styles/components/sections/heroSection.module.css +++ b/app/styles/components/sections/heroSection.module.css @@ -1,6 +1,7 @@ .HeroSection { width: 100%; height: 80vh; + position: relative; & img { width: 100%; @@ -11,7 +12,7 @@ & .buble { position: absolute; - top: 26%; + top: 33%; left: 50%; transform: translate(-50%, -50%); background: hwb(0 0% 100% / 0.6); @@ -64,6 +65,22 @@ } + & .swipeInfo { + position: absolute; + bottom: 12px; + right: 24px; + background: hwb(0 0% 100% / 0.6); + color: var(--color-light); + font-size: 13px; + font-weight: 400; + text-align: center; + font-family: "Nunito Sans", sans-serif; + padding: 6px 12px; + border-radius: 4px; + pointer-events: none; + + } + & .mobileHero { width: 100%; height: 100%;