diff --git a/package.json b/package.json index 62157b488..ec9767616 100644 --- a/package.json +++ b/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", diff --git a/src/hemsedal24/components/Container.module.css b/src/hemsedal24/components/Container.module.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/hemsedal24/components/Container.tsx b/src/hemsedal24/components/Container.tsx new file mode 100644 index 000000000..f4ada8149 --- /dev/null +++ b/src/hemsedal24/components/Container.tsx @@ -0,0 +1,5 @@ +import { ReactNode } from "react"; + +export default function Container({ children, className, ...props }: { children: ReactNode } & React.DetailedHTMLProps, HTMLDivElement>) { + return
{children}
+} diff --git a/src/hemsedal24/components/Hero.module.css b/src/hemsedal24/components/Hero.module.css index e83c49c3c..9af574a6f 100644 --- a/src/hemsedal24/components/Hero.module.css +++ b/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; + } } diff --git a/src/hemsedal24/components/Hero.tsx b/src/hemsedal24/components/Hero.tsx index 3dde7b7d1..f671e1b56 100644 --- a/src/hemsedal24/components/Hero.tsx +++ b/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
- - {/* hemsedalbilde */} - hemsedalbilde -
- blobben -
+ + + hemsedalbilde +

Hemsedal

30. august-1. september

+
+ blobben +
+
+ hemsedalbilde
; } diff --git a/src/hemsedal24/images/Retreatclub-fyri-solbaddar.svg b/src/hemsedal24/images/Retreatclub-fyri-solbaddar.svg new file mode 100644 index 000000000..f30317102 --- /dev/null +++ b/src/hemsedal24/images/Retreatclub-fyri-solbaddar.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/blob.svg b/src/hemsedal24/images/blob.svg index 28783abee..e36ca6200 100644 --- a/src/hemsedal24/images/blob.svg +++ b/src/hemsedal24/images/blob.svg @@ -1,3 +1,3 @@ - + diff --git a/src/hemsedal24/images/curvetext.svg b/src/hemsedal24/images/curvetext.svg index 70143303a..f7942d395 100644 --- a/src/hemsedal24/images/curvetext.svg +++ b/src/hemsedal24/images/curvetext.svg @@ -1,8 +1,8 @@ - - Variant på tusuuur!{"\u2600\uFE0F"} + + Variant på tuuuur! \ No newline at end of file diff --git a/src/hemsedal24/images/hemsedalhero2.png b/src/hemsedal24/images/hemsedalhero2.png deleted file mode 100644 index 7a13ebea1..000000000 Binary files a/src/hemsedal24/images/hemsedalhero2.png and /dev/null differ diff --git a/src/hemsedal24/images/hemsedalhero2.svg b/src/hemsedal24/images/hemsedalhero2.svg new file mode 100644 index 000000000..8b34f6344 --- /dev/null +++ b/src/hemsedal24/images/hemsedalhero2.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/retreatmobile.svg b/src/hemsedal24/images/retreatmobile.svg new file mode 100644 index 000000000..6deb56335 --- /dev/null +++ b/src/hemsedal24/images/retreatmobile.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/yarn.lock b/yarn.lock index 64c8f09aa..0f446bd4e 100644 --- a/yarn.lock +++ b/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"