Small decaration added to mobile view

CodastickFantastic · Apr 2, 2024 · 0a65b29 · 0a65b29
1 parent 37edbb4
commit 0a65b29
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 24 deletions.
diff --git 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 (
         <section className={styles.HeroSection}>
-            {isMobie === false && <>
-                <Image
-                    src={hero}
-                    width={1600}
-                    alt="Zdjęcie na łonie natury z modelami Jazba"
-                    className={styles.desktopHero}
-                />
-                <div className={styles.buble}>
-                    <h1>Wyraź Swoją Indywidalność</h1>
-                    <p>Kolekcja ubrań z wyjątkowymi haftami.<br />Znajdź swoją Jazbe lub stwórz ją z nami.</p>
-                    <Link to="/wzory">Przeglądaj Nasze Wzory</Link>
-                    <Link to="/#stworz-jazbe">Stwórz Swoją Jazbe</Link>
-                </div>
-            </>}
+            {isMobie === false &&
+                <>
+                    <Image
+                        src={hero}
+                        width={3200}
+                        alt="Zdjęcie na łonie natury z modelami Jazba"
+                        className={styles.desktopHero}
+                        loading="eager"
+                    />
+                    <div className={styles.buble}>
+                        <h1>Wyraź Swoją Indywidalność</h1>
+                        <p>Kolekcja ubrań z wyjątkowymi haftami.<br />Znajdź swoją Jazbe lub stwórz ją z nami.</p>
+                        <Link to="/wzory">Przeglądaj Nasze Wzory</Link>
+                        <Link to="/#stworz-jazbe">Stwórz Swoją Jazbe</Link>
+                    </div>
+                </>}
             {isMobie &&
                 <>
                     <div className={styles.mobileHero} ref={scroller}>
-                        <div className={styles.buble} ref={elementToScroll}>
-                            <h1>Wyraź Swoją Indywidalność</h1>
-                            <p>Kolekcja ubrań z wyjątkowymi haftami.<br />Znajdź swoją Jazbe lub stwórz ją z nami.</p>
-                            <Link to="/wzory">Przeglądaj Nasze Wzory</Link>
-                            <Link to="/wzory">Stwórz Swoją Jazbe</Link>
-                        </div>
 
                         <div className={styles.track}>
                             <Image
                                 src={hero}
-                                width={1600}
+                                width={3200}
                                 alt="Zdjęcie na łonie natury z modelami Jazba"
+                                loading="eager"
                             />
                         </div>
+                        <div className={styles.buble} ref={elementToScroll}>
+                            <h1>Wyraź Swoją Indywidalność</h1>
+                            <p>Kolekcja ubrań z wyjątkowymi haftami.<br />Znajdź swoją Jazbe lub stwórz ją z nami.</p>
+                            <Link to="/wzory">Przeglądaj Nasze Wzory</Link>
+                            <Link to="/#stworz-jazbe">Stwórz Swoją Jazbe</Link>
+                        </div>
+                        <span className={styles.swipeInfo}>Przesuń zdjęcie palcem &rarr;</span>
                     </div>
                 </>}
         </section>

diff --git 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%;