ID added to Link Pointing

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

Hide file tree

Showing 3 changed files with 139 additions and 54 deletions.
diff --git a/app/components/sections/CreateYourJazbaSection.jsx b/app/components/sections/CreateYourJazbaSection.jsx
@@ -25,7 +25,7 @@ export default function CreateYourJazbaSection() {
     }
 
     return (
-        <div className={`${styles.createYourJazbaSection} smallContainer`}>
+        <div id="stworz-jazbe" className={`${styles.createYourJazbaSection} smallContainer`}>
             <div className={styles.content}>
                 <h2>Nie widzisz wzoru dla siebie?</h2>
                 <p className={styles.underHeader}>Wyślij nam informacje na temat Jazby, która by do Ciebie pasowała.<br /><br />Stwórzmy razem coś niesamowitego!</p >

diff --git a/app/components/sections/HeroSection.jsx b/app/components/sections/HeroSection.jsx
@@ -2,19 +2,20 @@ import styles from "~/styles/components/sections/heroSection.module.css"
 import { Image } from "@shopify/hydrogen-react"
 
 import hero from "~/../public/jazba-hero-2024-3K.webp"
-import { useEffect, useRef } from "react"
+import { useEffect, useRef, useState } from "react"
+import { Link } from "@remix-run/react"
 
 export default function HeroSection() {
     const scroller = useRef(null)
     const elementToScroll = useRef(null)
-
+    const [isMobie, setIsMobiel] = useState(true)
 
     useEffect(() => {
-        function onScroll() {
+        function onSwipe() {
             const windowWidth = window.innerWidth
             const scrollerWidth = scroller.current.scrollWidth
             const cursor = scroller.current.scrollLeft / (scrollerWidth - windowWidth) * 100
-            const scrolBy = 50 - cursor * 4
+            const scrolBy = 50 - cursor * 1
 
             if (scrolBy < 0) {
                 console.log("-")
@@ -25,28 +26,51 @@ export default function HeroSection() {
 
         }
 
-        scroller.current.addEventListener("scroll", onScroll, false)
+        if (window.innerWidth >= 950) {
+            setIsMobiel(false)
+        } else {
+            setIsMobiel(true)
+            scroller.current.addEventListener("scroll", onSwipe, false)
+        }
+
+
     }, [])
 
     return (
         <section className={styles.HeroSection}>
-            <p className={styles.title}>Wyraź swoją indywidalność</p>
-            <Image
-                src={hero}
-                width={1600}
-                alt="Zdjęcie na łonie natury z modelami Jazba"
-                className={styles.desktopHero}
-            />
-            <div className={styles.mobileHero} ref={scroller}>
-                <h1 ref={elementToScroll}>Wyraź swoją indywidalność</h1>
-                <div className={styles.track}>
-                    <Image
-                        src={hero}
-                        width={1600}
-                        alt="Zdjęcie na łonie natury z modelami Jazba"
-                    />
+            {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>
-            </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}
+                                alt="Zdjęcie na łonie natury z modelami Jazba"
+                            />
+                        </div>
+                    </div>
+                </>}
         </section>
     )
 }
diff --git a/app/styles/components/sections/heroSection.module.css b/app/styles/components/sections/heroSection.module.css
@@ -1,6 +1,6 @@
 .HeroSection {
     width: 100%;
-    height: 75vh;
+    height: 80vh;
 
     & img {
         width: 100%;
@@ -9,6 +9,61 @@
         object-position: 41% center;
     }
 
+    & .buble {
+        position: absolute;
+        top: 26%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: hwb(0 0% 100% / 0.6);
+        border-radius: 8px;
+        width: 90%;
+        max-width: 500px;
+        padding: 24px 12px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+
+
+        & h1 {
+            font-size: 22px !important;
+            font-weight: 600;
+            color: var(--color-light);
+            text-align: center;
+            font-family: "Nunito Sans", sans-serif;
+            margin-bottom: 12px !important;
+        }
+
+        & p {
+            font-size: 14px;
+            font-weight: 400;
+            color: var(--color-light);
+            text-align: center;
+            font-family: "Nunito Sans", sans-serif;
+            line-height: 0.9;
+            margin-bottom: 12px;
+        }
+
+        & a {
+            font-size: 12px;
+            font-weight: 400;
+            color: var(--color-light);
+            text-align: center;
+            font-family: "Nunito Sans", sans-serif;
+            padding: 8px 12px;
+            border: 1px solid var(--color-light);
+            border-radius: 4px;
+            text-decoration: none;
+            pointer-events: all;
+
+            &:first-of-type {
+                margin-bottom: 12px;
+            }
+        }
+
+    }
+
     & .mobileHero {
         width: 100%;
         height: 100%;
@@ -19,52 +74,25 @@
             display: none;
         }
 
-        & h1 {
-            position: absolute;
-            top: 20%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-size: 32px !important;
-            font-weight: 600;
-            color: var(--color-light);
-            text-align: center;
-            width: 100%;
-            max-width: 500px;
-            border-radius: 8px;
-            font-family: "Srisakdi", sans-serif;
-            background: #00000033;
-            pointer-events: none;
-        }
-
         & .track {
             width: 300%;
             height: 100%;
 
         }
     }
 
-    & .desktopHero,
-    .title {
-        display: none;
-    }
 
 
-    @media(min-width: 1000px) {
-        height: 85dvh;
-        max-height: 700px;
 
-        & img {
-            /* object-position: center center; */
-        }
+    @media(min-width: 950px) {
+        height: 85dvh;
+        max-height: 740px;
+        position: relative;
 
         & .mobileHero {
             display: none;
         }
 
-        & .desktopHero {
-            display: block;
-        }
-
         & .title {
             display: block;
             position: absolute;
@@ -82,5 +110,38 @@
             background: #00000054;
             pointer-events: none;
         }
+
+        & .buble {
+            position: absolute;
+            top: 45%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            pointer-events: all;
+
+
+            & h1 {
+                font-size: 32px !important;
+            }
+
+            & p {
+                font-size: 18px;
+                line-height: 1;
+                margin-bottom: 24px;
+            }
+
+            & a {
+                font-size: 14px;
+                pointer-events: all;
+
+                &:first-of-type {
+                    margin-bottom: 14px;
+                }
+
+                &:hover {
+                    scale: 0.95;
+                }
+            }
+
+        }
     }
 }