hemsedal23 hero done

package.json

@@ -46,6 +46,7 @@
     "next-images": "^1.8.5",
     "node-html-parser": "^6.1.11",
     "react": "^18.2.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.5.3",
     "react-slider": "^2.0.6",

src/hemsedal24/components/Container.tsx

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+
+export default function Container({ children, className, ...props }: { children: ReactNode } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
+  return <div className={`${className ? className : ''} $`} {...props}>{children}</div>
+}

src/hemsedal24/components/Hero.module.css

@@ -1,115 +1,90 @@
+section {
+}
 .container {
   display: flex;
-  position: relative;
-  margin-top: 8rem;
-  flex-direction: column;
+  justify-content: space-between;
+  flex-direction: row;
+  width: 100vw;
 }
 
-.left {
+.text {
   display: flex;
-  margin-bottom: 1.5rem;
-  margin-top: 1rem;
   flex-direction: column;
-  margin-left: 4rem;
-}
-
-.text {
-  width: 100%;
   z-index: 10;
   font-size: 2.25rem;
   line-height: 2.5rem;
-  text-align: center;
+  justify-content: center;
+  margin-left: -13%;
 }
 
 .text > h1 {
-  font-size: 4rem;
-  font-weight: 500;
+  font-size: 200%;
+  font-weight: 450;
 }
 
 .text > h2 {
+  display: flex;
   font-size: 1rem;
   line-height: 2.25rem;
-  margin-top: 0;
   font-weight: 500;
+  margin-top: 0;
+  justify-content: center;
 }
 
-.arrow {
-  position: absolute;
-  left: 1rem;
-  top: -3rem;
-  width: 100px;
-  font-family: 'Recoleta';
-  z-index: 5;
+.blob {
+  margin-left: -45%;
+  margin-top: 50%;
+  z-index: auto;
+  min-width: 65%;
 }
 
-.arrow > span {
-  position: absolute;
-  top: -2.5rem;
+.hemsedalhero1 {
+  margin-left: -15%;
+  margin-top: -8%;
+  max-width: 50%;
+  margin-right: -5%;
 }
 
-.arrow > img {
-  width: 60px;
-  transform: rotate(45deg);
+.hemsedalhero2 {
+  max-width: 30%;
+  margin-top: -9%;
+  margin-right: 0;
+  margin-left: -10%;
 }
 
-.blob {
-  position: absolute;
-  right: 11rem;
-  z-index: auto;
-  width: 33.333333%;
+.blobandtext {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
 }
 
-@media (min-width: 1024px) {
-  .container {
-    align-items: center;
-    flex-direction: row;
+@media (max-width: 400px) {
+  .hemsedalhero2 {
+    max-width: 0%;
   }
-
-  .left {
-    width: 50%;
+  .hemsedalhero1 {
+    max-width: 90%;
+    margin: -13% -20% -30% -40%;
   }
 
-  .arrow {
-    top: 3.5rem;
-    left: -3rem;
-    width: 20%;
+  .blobandtext {
+    margin: 10% -10% 0 0;
   }
 
-  .arrow > span {
-    top: -2rem;
+  .blob {
+    margin: 0 0 0 -30%;
+    min-width: 40%;
   }
-
-  .arrow > img {
-    transform: rotate(0);
+  .text > h1 {
+    font-size: 150%;
+    font-weight: 400;
+    margin: 0;
   }
-}
-
-.hemsedalhero1 {
-  position: absolute;
-  top: -8rem;
-  right: 62.7vw;
-  width: 35%;
-  height: auto;
-}
 
-.hemsedalhero1text {
-  position: absolute;
-  top: -7.4rem;
-  right: 65.6vw;
-  width: 43%;
-  height: auto;
-}
-
-.hemsedalhero2 {
-  position: absolute;
-  top: -7rem;
-  left: 71.1vw;
-  width: 25%;
-  height: auto;
-}
-
-text {
-  font-weight: 400;
-  font-family: 'Graphik Web';
-  font-size: larger;
+  .text {
+    margin: 0 0 0 0;
+  }
+  .container {
+    flex-direction: column;
+  }
 }

src/hemsedal24/components/Hero.tsx

@@ -1,28 +1,32 @@
 import styles from "./Hero.module.css";
-
+import {isMobile} from 'react-device-detect';
 import arrow from "../images/curved-arrow.svg";
 import s from "../images/s.svg"
 import Image from 'next/image';
 import blob from "../images/blob.svg";
-import HemsedalImage from "./hemsedalimgcurvedtext";
-import hemsedalhero1 from "../../../public/images/hemsedalhero1text.svg"
-import hemsedalHero2 from "../images/hemsedalhero2.png"
-import Container from "../../helsinki23/components/Container";
+import retreatmobile from "../images/retreatmobile.svg"
+import retreat from "../images/Retreatclub-fyri-solbaddar.svg"
+import hemsedalHero2 from "../images/hemsedalhero2.svg"
+import Container from "./Container";
+
 
 
 export default function Hero() {
   return <section id="hero">
     <Container className={styles.container}>
-    <HemsedalImage/>
-    {/* <img src={hemsedalhero1} alt="hemsedalbilde" className={styles.hemsedalhero1}/> */}
-    <img src={hemsedalHero2} alt="hemsedalbilde" className={styles.hemsedalhero2}/>
-        <div className={styles.blob}>
-          <img src={blob} alt="blobben" />
-        </div>
+
+
+    <img src={isMobile ? retreatmobile : retreat} alt="hemsedalbilde" className={styles.hemsedalhero1}/>
+        <div className={styles.blobandtext}>
         <div className={styles.text}>
           <h1>Hemsedal</h1>
           <h2>30. august-1. september</h2>
         </div>
+        <div className={styles.blob}>
+          <img src={blob} alt="blobben" />
+        </div>
+        </div>
+        <img src={hemsedalHero2} alt="hemsedalbilde" className={styles.hemsedalhero2}/>
     </Container>
   </section>;
 }

yarn.lock

@@ -3260,6 +3260,13 @@ queue-microtask@^1.2.2:
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+react-device-detect@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.2.3.tgz#97a7ae767cdd004e7c3578260f48cf70c036e7ca"
+  integrity sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==
+  dependencies:
+    ua-parser-js "^1.0.33"
+
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -3880,6 +3887,11 @@ typescript@^5.2.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
   integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
 
+ua-parser-js@^1.0.33:
+  version "1.0.38"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.38.tgz#66bb0c4c0e322fe48edfe6d446df6042e62f25e2"
+  integrity sha512-Aq5ppTOfvrCMgAPneW1HfWj66Xi7XL+/mIy996R1/CLS/rcyJQm6QZdsKrUeivDFQ+Oc9Wyuwor8Ze8peEoUoQ==
+
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
   resolved "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz"