From 18e416330704bb4bcb52c3e87a60950f3b54eedd Mon Sep 17 00:00:00 2001 From: Maria Katrin Bonde <78419778+MariaBonde@users.noreply.github.com> Date: Mon, 19 Aug 2024 17:43:57 +0200 Subject: [PATCH] Hemsedal24 (#482) * activity page * mesteparten ferdig * fixings --- pages/hemsedal24/aktiviteter.tsx | 1 + pages/hemsedal24/tingogtang.tsx | 1 + src/hemsedal24/activities.module.css | 118 ++++++++ src/hemsedal24/activities.tsx | 68 +++++ .../components/ActivityBlock.module.css | 60 ++++ src/hemsedal24/components/ActivityBlock.tsx | 17 ++ .../components/Container.module.css | 5 + src/hemsedal24/components/Container.tsx | 3 +- src/hemsedal24/components/Day.module.css | 65 ++++- src/hemsedal24/components/Day.tsx | 5 +- src/hemsedal24/components/Hero.module.css | 33 ++- src/hemsedal24/components/Hero.tsx | 11 +- src/hemsedal24/hemsedal.module.css | 265 +++++++++++++++--- src/hemsedal24/images/Mask group.svg | 14 + src/hemsedal24/images/activityblob.svg | 3 + src/hemsedal24/images/arrow-left.svg | 4 + src/hemsedal24/images/bigblobmobile.svg | 6 + src/hemsedal24/images/bop.svg | 2 +- src/hemsedal24/images/bottom-blub-mobil.svg | 14 + src/hemsedal24/images/bottom_blub.svg | 14 + src/hemsedal24/images/hemsedalhero1text.svg | 2 +- src/hemsedal24/images/hemsedalhero2.svg | 2 +- src/hemsedal24/images/hund.svg | 14 + src/hemsedal24/images/latter.svg | 14 + .../images/mobilepagebottomblob.svg | 14 + src/hemsedal24/images/pagebottomblob.svg | 14 + src/hemsedal24/images/resortbottom.svg | 14 + src/hemsedal24/images/retreatmobile.svg | 32 ++- src/hemsedal24/images/snok.svg | 14 + src/hemsedal24/images/sykling.svg | 14 + src/hemsedal24/images/tingogtangblob.svg | 3 + src/hemsedal24/images/top-blub-mobil.svg | 14 + src/hemsedal24/images/top_blub.svg | 14 + src/hemsedal24/images/viaferrata.svg | 14 + src/hemsedal24/index.tsx | 230 +++++++++------ src/hemsedal24/tingogtang.tsx | 54 ++++ 36 files changed, 1011 insertions(+), 161 deletions(-) create mode 100644 pages/hemsedal24/aktiviteter.tsx create mode 100644 pages/hemsedal24/tingogtang.tsx create mode 100644 src/hemsedal24/activities.module.css create mode 100644 src/hemsedal24/activities.tsx create mode 100644 src/hemsedal24/components/ActivityBlock.module.css create mode 100644 src/hemsedal24/components/ActivityBlock.tsx create mode 100644 src/hemsedal24/images/Mask group.svg create mode 100644 src/hemsedal24/images/activityblob.svg create mode 100644 src/hemsedal24/images/arrow-left.svg create mode 100644 src/hemsedal24/images/bigblobmobile.svg create mode 100644 src/hemsedal24/images/bottom-blub-mobil.svg create mode 100644 src/hemsedal24/images/bottom_blub.svg create mode 100644 src/hemsedal24/images/hund.svg create mode 100644 src/hemsedal24/images/latter.svg create mode 100644 src/hemsedal24/images/mobilepagebottomblob.svg create mode 100644 src/hemsedal24/images/pagebottomblob.svg create mode 100644 src/hemsedal24/images/resortbottom.svg create mode 100644 src/hemsedal24/images/snok.svg create mode 100644 src/hemsedal24/images/sykling.svg create mode 100644 src/hemsedal24/images/tingogtangblob.svg create mode 100644 src/hemsedal24/images/top-blub-mobil.svg create mode 100644 src/hemsedal24/images/top_blub.svg create mode 100644 src/hemsedal24/images/viaferrata.svg create mode 100644 src/hemsedal24/tingogtang.tsx diff --git a/pages/hemsedal24/aktiviteter.tsx b/pages/hemsedal24/aktiviteter.tsx new file mode 100644 index 000000000..3e594578d --- /dev/null +++ b/pages/hemsedal24/aktiviteter.tsx @@ -0,0 +1 @@ +export { default } from 'src/hemsedal24/activities'; \ No newline at end of file diff --git a/pages/hemsedal24/tingogtang.tsx b/pages/hemsedal24/tingogtang.tsx new file mode 100644 index 000000000..c843574cd --- /dev/null +++ b/pages/hemsedal24/tingogtang.tsx @@ -0,0 +1 @@ +export { default } from 'src/hemsedal24/tingogtang' \ No newline at end of file diff --git a/src/hemsedal24/activities.module.css b/src/hemsedal24/activities.module.css new file mode 100644 index 000000000..565606873 --- /dev/null +++ b/src/hemsedal24/activities.module.css @@ -0,0 +1,118 @@ +.header { + margin: 10% 0 10% 0; + display: flex; + flex-direction: column; + justify-content: center; + z-index: 1; +} + +.header h3 { + display: flex; + justify-content: center; + margin-bottom: 5%; +} + +.header span { + display: flex; + justify-content: center; + margin-right: 5%; +} + +.navigation span { + color: var(--color-standard__black); + padding: 0 6px 0 0; + font-weight: 400; + font-family: 'Graphik Web'; +} + +.navigation img { + vertical-align: middle; +} + +.tur { + display: flex; + flex-direction: column; + justify-content: center; + background: #ede8d7; + color: var(--color-standard__black); + margin: 0; + padding: 5% 20% 0 20%; + font-family: 'Graphik Web'; + min-height: 100vh; + overflow: hidden; +} + +.tur h1, +.tur h2, +.tur h3 { + font-family: 'Recoleta'; +} + +.tur h2 { + font-weight: 400; + font-size: 1.5rem; + line-height: 2rem; +} + +.blob { + z-index: auto; + min-width: 35%; + position: absolute; + top: 0; + margin: 0 0 0 30%; +} + +.title { + z-index: 10; +} + +.bop { + flex-shrink: 0; + display: flex; + justify-content: center; + width: 20%; + z-index: 10; + margin: 0 auto; + margin-top: 10%; +} + +@media (max-width: 500px) { + .blob { + min-width: 90%; + top: 0; + margin: -10% 0 0 20%; + } + + .tur { + padding: 10% 10% 0 10%; + } + + .header h3 { + justify-content: flex-start; + } + .header span { + margin: 0; + color: var(--Secondary-4-D4, #2f2e2b); + font-family: Graphik; + font-size: 0.9rem; + font-style: normal; + font-weight: 400; + line-height: 2rem; /* 200% */ + } + + .title h3 { + color: var(--Secondary-4-D4, #2f2e2b); + font-family: Recoleta; + font-size: 1.775rem; + font-style: normal; + font-weight: 400; + line-height: 2.4375rem; /* 130% */ + } + .header { + margin-bottom: 25%; + } + + .bop { + width: 50%; + } +} diff --git a/src/hemsedal24/activities.tsx b/src/hemsedal24/activities.tsx new file mode 100644 index 000000000..d3c691360 --- /dev/null +++ b/src/hemsedal24/activities.tsx @@ -0,0 +1,68 @@ + +import { NextPage } from "next"; +import Link from "next/link"; +import arrowleft from "./images/arrow-left.svg" +import styles from "./activities.module.css" +import blob from "./images/activityblob.svg" +import bop from "./images/bop.svg" +import ActivityBlock from "./components/ActivityBlock"; +import hund from "./images/hund.svg" +import sykling from "./images/sykling.svg" +import via from "./images/viaferrata.svg" +import { useEffect, useState} from "react"; +const Activities: NextPage = () => { + const [mobile, setMobile] = useState(false); + + useEffect(() => { + const handleWindowSizeChange = () => { + setMobile(window.innerWidth <= 500); + }; + + handleWindowSizeChange(); // Set initial value after component mounts + window.addEventListener('resize', handleWindowSizeChange); + + return () => window.removeEventListener('resize', handleWindowSizeChange); + }, []); + return ( +
+ {mobile ?<> : + pil venste + Tilbake + } +
blob
+
+

Aktivitetene på lørdag

+ + Lørdag! Aktiviteter! Sykle på fjellet, klatre i fjellveggen eller kose med hunder, + det er mye forskjellig som skjer på lørdag. Her har vi derfor samlet litt informasjon om + de forskjellige aktivitetene her slik at man er forberedt på hva lørdagsaktivitetene vil bringe ⛰️🌞 +
+ + + +
big blobs
 +
+); +}; + +export default Activities; \ No newline at end of file diff --git a/src/hemsedal24/components/ActivityBlock.module.css b/src/hemsedal24/components/ActivityBlock.module.css new file mode 100644 index 000000000..7644f83d4 --- /dev/null +++ b/src/hemsedal24/components/ActivityBlock.module.css @@ -0,0 +1,60 @@ +.block { + display: flex; + max-width: 100%; + align-items: center; + margin: auto; + justify-content: space-between; + margin-bottom: 7%; +} + +.textportion { + flex-direction: column; + display: flex; + width: 57%; +} +.textportion h2 { + font-weight: 500; + padding-bottom: 2%; +} +.picture { + display: flex; + min-width: 40%; + margin-right: -5%; +} + +p { + font-size: 100%; +} + +.textportion a { + all: unset; + text-underline-offset: 2px !important; + text-decoration: underline !important; + text-decoration-thickness: 2px !important; + text-decoration-color: #e61a6b !important; + cursor: pointer; + color: #e61a6b; +} + +@media (max-width: 500px) { + .block { + flex-direction: column; + } + .textportion { + width: 100%; + } + + p { + margin: 0; + color: var(--Secondary-4-D4, #2f2e2b); + font-family: Graphik; + font-size: 0.9rem; + font-style: normal; + font-weight: 400; + line-height: 2rem; /* 200% */ + } + .picture { + min-width: 100%; + margin: -2% 0 10% 0; + } +} diff --git a/src/hemsedal24/components/ActivityBlock.tsx b/src/hemsedal24/components/ActivityBlock.tsx new file mode 100644 index 000000000..126ce9ba6 --- /dev/null +++ b/src/hemsedal24/components/ActivityBlock.tsx @@ -0,0 +1,17 @@ + +import Link from "next/link"; + +import styles from "./ActivityBlock.module.css" + +export default function ActivityBlock({ title, text, link, reference, picture}: { title: string, text: string, link: string, reference: string, picture:string}) { + return
+
+
+

{title}

+

{text}

+

Du finner mer informasjon om {reference} HER

+
+
bilde
+
+
+} \ No newline at end of file diff --git a/src/hemsedal24/components/Container.module.css b/src/hemsedal24/components/Container.module.css index e69de29bb..7e15470b7 100644 --- a/src/hemsedal24/components/Container.module.css +++ b/src/hemsedal24/components/Container.module.css @@ -0,0 +1,5 @@ +.container { + margin-left: auto; + margin-right: auto; + padding: 0% 10% 5% 10%; +} diff --git a/src/hemsedal24/components/Container.tsx b/src/hemsedal24/components/Container.tsx index f4ada8149..bec07aa97 100644 --- a/src/hemsedal24/components/Container.tsx +++ b/src/hemsedal24/components/Container.tsx @@ -1,5 +1,6 @@ import { ReactNode } from "react"; +import styles from './Container.module.css' export default function Container({ children, className, ...props }: { children: ReactNode } & React.DetailedHTMLProps, HTMLDivElement>) { - return
{children}
+ return
{children}
} diff --git a/src/hemsedal24/components/Day.module.css b/src/hemsedal24/components/Day.module.css index c3835604c..fc714d40b 100644 --- a/src/hemsedal24/components/Day.module.css +++ b/src/hemsedal24/components/Day.module.css @@ -16,6 +16,12 @@ align-items: center; } +.day time { + display: inline-block; + width: 4rem; + margin-right: 1rem; +} + .day ul { list-style: none; font-size: 110%; @@ -24,9 +30,19 @@ } .day ul > li { - line-height: 46px; - margin-bottom: 1rem; - margin-top: 0; + display: flex; /* Use flexbox to align time and text */ + align-items: flex-start; /* Align items at the top */ + margin-bottom: 2rem; +} + +.day ul > li time { + flex-shrink: 0; /* Prevent the time element from shrinking */ + margin-right: 15px; /* Adds space between time and text */ /* Set consistent height for the time element */ +} + +.day ul > li span { + /* Set a comfortable line height for the text */ + display: inline-block; /* Ensure proper block-level behavior */ } .day a { @@ -41,8 +57,6 @@ } @media (min-width: 1024px) { - .with_background { - } } @media (max-width: 767px) { @@ -56,3 +70,44 @@ margin: 0 0; } } + +@media (max-width: 500px) { + .day { + padding: 1rem; + margin-top: 2.5rem; + flex-direction: column; + align-items: flex-start; + } + + .day > h2 { + font-family: Graphik; + font-size: 1.25rem; + font-style: normal; + font-weight: 600; + line-height: 2rem; + padding-bottom: 2rem; + } + + .with_background { + padding-top: 3rem; + padding-bottom: 2rem; + padding: 3rem 1rem 2rem 1rem; + } + .day ul { + list-style: none; + padding-left: 1rem; + margin: 0 0; + } + + .day a { + padding-left: 10rem; + all: unset; + text-underline-offset: 8px !important; + text-decoration: underline !important; + text-decoration-thickness: 2px !important; + text-decoration-color: #03dac6 !important; + display: inline-flex !important; + gap: 10px !important; + cursor: pointer; + } +} diff --git a/src/hemsedal24/components/Day.tsx b/src/hemsedal24/components/Day.tsx index 1c0a691aa..2ebf84acb 100644 --- a/src/hemsedal24/components/Day.tsx +++ b/src/hemsedal24/components/Day.tsx @@ -1,17 +1,16 @@ import { ReactNode } from "react"; import styles from './Day.module.css'; -import Container from "./Container"; export default function Day({ title, children, background = false }: { title: string, children: ReactNode, background?: boolean }) { return
- +

{title}

{children}
- +
; } diff --git a/src/hemsedal24/components/Hero.module.css b/src/hemsedal24/components/Hero.module.css index 6af744168..e790d7d93 100644 --- a/src/hemsedal24/components/Hero.module.css +++ b/src/hemsedal24/components/Hero.module.css @@ -15,11 +15,10 @@ section { line-height: 2.5rem; justify-content: center; margin-left: -20%; - } .text > h1 { - font-size: 200%; + font-size: 5vw; font-weight: 450; } @@ -59,31 +58,43 @@ section { justify-content: center; } -@media (max-width: 400px) { +@media (max-width: 500px) { .hemsedalhero2 { max-width: 0%; } .hemsedalhero1 { - max-width: 90%; - margin: -13% -20% -30% -40%; + max-width: 150%; + margin: -23% -20% -30% -70%; } .blobandtext { - margin: 10% -10% 0 0; + justify-content: flex-end; } .blob { - margin: 0 0 0 -30%; - min-width: 40%; + width: 15rem; + height: 15.4rem; + flex-shrink: 0; + margin: 0 -15% 0 -48%; } .text > h1 { - font-size: 150%; + font-size: 4.25rem; + font-weight: 400; + line-height: 5.1rem; + } + .text > h2 { + display: block; + text-align: right; + font-family: Recoleta; + font-size: 1.25rem; + font-style: normal; font-weight: 400; - margin: 0; + line-height: 1rem; /* 195% */ } .text { - margin: 0 0 0 0; + display: flex; + align-content: center; } .container { flex-direction: column; diff --git a/src/hemsedal24/components/Hero.tsx b/src/hemsedal24/components/Hero.tsx index 04f52e129..012fef2a4 100644 --- a/src/hemsedal24/components/Hero.tsx +++ b/src/hemsedal24/components/Hero.tsx @@ -1,21 +1,18 @@ import styles from "./Hero.module.css"; -import {isMobile} from 'react-device-detect'; //import arrow from "../images/curved-arrow.svg"; import blob from "../images/blob.svg"; 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() { +export default function Hero({mobile}: {mobile:boolean}) { return
- - +
- hemsedalbilde + hemsedalbilde

Hemsedal

@@ -26,7 +23,7 @@ export default function Hero() {
hemsedalbilde - +
; } diff --git a/src/hemsedal24/hemsedal.module.css b/src/hemsedal24/hemsedal.module.css index 08ca70132..b2fae85b7 100644 --- a/src/hemsedal24/hemsedal.module.css +++ b/src/hemsedal24/hemsedal.module.css @@ -1,3 +1,18 @@ +.backgroundContainer { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + z-index: -1; + overflow: hidden; +} + +.background__item { + position: relative; + width: 60rem; + height: 60rem; +} + .tur { background: #ede8d7; color: var(--color-standard__black); @@ -5,7 +20,7 @@ padding: 0; font-family: 'Graphik Web'; min-height: 100vh; - overflow: auto; + overflow: hidden; } .tur h1, @@ -20,23 +35,6 @@ line-height: 2rem; } -.tur p { - max-width: 50rem; - font-size: 16px; - margin-top: 1.5rem; - font-weight: 400; -} - -.tur li { - margin-bottom: 2rem; -} - -.tur time { - display: inline-block; - width: 4rem; - margin-right: 3rem; -} - .tur a { all: unset; color: #fff; @@ -71,38 +69,237 @@ html { scroll-behavior: smooth; } +.bigblobsss { + composes: background__item; + top: 70rem; + left: calc(50% - 26rem); + width: 80rem; +} + .bigblobs { - min-width: 100%; - z-index: auto; - margin-top: -10%; + composes: background__item; + width: 100%; + margin-bottom: 15rem; + margin-top: -6rem; +} + +.bigblobtekst { + display: flex; + justify-content: center; + align-items: center; + max-width: 70%; + z-index: 10; + margin-left: 30%; + transform: translateY(-300%); +} + +.overlay { + z-index: 10; + display: flex; + justify-content: center; + align-items: center; + margin-top: -5%; + padding: 5rem 12% 0 12%; +} + +.overlay p { + font-size: 0.9rem; +} + +.latter { + min-width: 40%; + margin-left: 4rem; } .secondbigblobs { - margin-bottom: -30%; - min-width: 100%; + min-width: 100vh; z-index: auto; - margin-top: -10%; + bottom: 0; } -body, -html { +.secondbigblobs2 { + width: 100%; + position: absolute; + bottom: 0; +} + +.secondbigblobs2 img { + position: relative; + display: block; +} + +.resortbottom { + min-width: 25%; + margin-top: -6%; + margin-left: 10%; +} + +.bunninfo { + background: var(--Secondary-4-L2, #f4f1e7); + width: 100%; + display: flex; + justify-content: center; + align-items: center; margin: 0; - padding: 0; - overflow-x: hidden; /* Prevent horizontal scrolling */ - scroll-snap-type: none; + margin-top: -1%; + padding: 3rem 10% 10% 10%; +} +.bunninfo h2 { + margin-bottom: 1.5rem; } +.bold { + font-size: 1rem; + font-style: normal; + font-weight: 600; + line-height: 2rem; +} .bop { + flex-shrink: 0; display: flex; justify-content: center; - margin-bottom: -10%; - max-width: 100%; - overflow: hidden; - min-width: 20%; - min-height: 50%; + width: 20%; + z-index: 10; + margin: 0 auto; +} + +.bop img { + /* Or another appropriate value */ + height: auto; /* Maintain aspect ratio */ } .program h3 { display: flex; justify-content: center; } + +.font-color { + color: var(--color-standard__black); +} +.tingogtangheader { + display: flex; + justify-content: center; + align-items: center; + margin-top: 5%; +} + +.tingogtangbody { + display: flex; + justify-content: space-between; + align-items: center; +} + +.tt_textbox { + flex-direction: column; + max-width: 60%; +} + +.tt_textbox span { + display: inline-block; + font-size: 110%; +} + +.ttheadertittel { + margin-left: -10%; + z-index: 10; +} + +.snokimg { + margin-right: -7%; + margin-top: -5%; + min-width: 45%; +} + +@media (max-width: 500px) { + .ttheadertittel { + min-width: 100%; + margin-left: -5.5rem; + } + .tingogtangheader h3 { + font-size: 1.675rem; + font-style: normal; + font-weight: 400; + line-height: 2.4375rem; /* 130% */ + text-wrap: wrap; + } + .tingogtangheader { + margin-top: 10%; + } + + .tingogtangbody { + margin-top: 5%; + flex-direction: column; + } + .tt_textbox { + max-width: 100%; + font-size: 0.8rem; + font-style: normal; + line-height: 2rem; + } + + .snokimg { + min-width: 220%; + margin-top: -20%; + } + + .navigation { + flex-direction: column; + justify-content: center; + align-items: center; + align-content: space-between; + } + + .navigation > a { + margin-bottom: 1.5rem; + } + + .program h3 { + font-size: 1.875rem; + font-style: normal; + font-weight: 400; + } + + .program h2 { + font-family: Graphik; + font-size: 1.25rem; + font-style: normal; + font-weight: 600; + line-height: 2rem; /* 160% */ + } + + .bigblobs { + min-width: 230%; + min-height: 100%; + margin: -40% 0 110% 50%; + transform: translateX(-30%); + } + + .secondbigblobs { + margin-bottom: -40%; + } + + .bunninfo { + flex-direction: column; + margin-top: -2%; + } + + .resortbottom { + margin-top: 3rem; + min-width: 100%; + } + .bop { + width: 38%; + } + .bop img { + min-width: 100%; + } + + .overlay { + flex-direction: column; + justify-content: center; + } + .latter { + min-width: 100%; + margin: 20% 0 20% 0; + } +} diff --git a/src/hemsedal24/images/Mask group.svg b/src/hemsedal24/images/Mask group.svg new file mode 100644 index 000000000..693eecaaf --- /dev/null +++ b/src/hemsedal24/images/Mask group.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/activityblob.svg b/src/hemsedal24/images/activityblob.svg new file mode 100644 index 000000000..de411ff10 --- /dev/null +++ b/src/hemsedal24/images/activityblob.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/hemsedal24/images/arrow-left.svg b/src/hemsedal24/images/arrow-left.svg new file mode 100644 index 000000000..9481a4ab0 --- /dev/null +++ b/src/hemsedal24/images/arrow-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/hemsedal24/images/bigblobmobile.svg b/src/hemsedal24/images/bigblobmobile.svg new file mode 100644 index 000000000..3a5813b6f --- /dev/null +++ b/src/hemsedal24/images/bigblobmobile.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/hemsedal24/images/bop.svg b/src/hemsedal24/images/bop.svg index 5275ecab2..0b203f796 100644 --- a/src/hemsedal24/images/bop.svg +++ b/src/hemsedal24/images/bop.svg @@ -1,4 +1,4 @@ - +> diff --git a/src/hemsedal24/images/bottom-blub-mobil.svg b/src/hemsedal24/images/bottom-blub-mobil.svg new file mode 100644 index 000000000..e02386767 --- /dev/null +++ b/src/hemsedal24/images/bottom-blub-mobil.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/bottom_blub.svg b/src/hemsedal24/images/bottom_blub.svg new file mode 100644 index 000000000..26a3397fb --- /dev/null +++ b/src/hemsedal24/images/bottom_blub.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/hemsedalhero1text.svg b/src/hemsedal24/images/hemsedalhero1text.svg index 11275243a..f98a4e873 100644 --- a/src/hemsedal24/images/hemsedalhero1text.svg +++ b/src/hemsedal24/images/hemsedalhero1text.svg @@ -1,4 +1,4 @@ - + diff --git a/src/hemsedal24/images/hemsedalhero2.svg b/src/hemsedal24/images/hemsedalhero2.svg index 8b34f6344..dc9a7a14e 100644 --- a/src/hemsedal24/images/hemsedalhero2.svg +++ b/src/hemsedal24/images/hemsedalhero2.svg @@ -1,4 +1,4 @@ - + diff --git a/src/hemsedal24/images/hund.svg b/src/hemsedal24/images/hund.svg new file mode 100644 index 000000000..2df6f1d00 --- /dev/null +++ b/src/hemsedal24/images/hund.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/latter.svg b/src/hemsedal24/images/latter.svg new file mode 100644 index 000000000..63c8dbde3 --- /dev/null +++ b/src/hemsedal24/images/latter.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/mobilepagebottomblob.svg b/src/hemsedal24/images/mobilepagebottomblob.svg new file mode 100644 index 000000000..0e309719b --- /dev/null +++ b/src/hemsedal24/images/mobilepagebottomblob.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/pagebottomblob.svg b/src/hemsedal24/images/pagebottomblob.svg new file mode 100644 index 000000000..0794f543c --- /dev/null +++ b/src/hemsedal24/images/pagebottomblob.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/resortbottom.svg b/src/hemsedal24/images/resortbottom.svg new file mode 100644 index 000000000..77a93bb4b --- /dev/null +++ b/src/hemsedal24/images/resortbottom.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/retreatmobile.svg b/src/hemsedal24/images/retreatmobile.svg index 6deb56335..7a3704cb9 100644 --- a/src/hemsedal24/images/retreatmobile.svg +++ b/src/hemsedal24/images/retreatmobile.svg @@ -1,14 +1,30 @@ - - - + + + - - + + + + + + + + + + + + + + + + + + - - + + - + diff --git a/src/hemsedal24/images/snok.svg b/src/hemsedal24/images/snok.svg new file mode 100644 index 000000000..39cf786cc --- /dev/null +++ b/src/hemsedal24/images/snok.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/sykling.svg b/src/hemsedal24/images/sykling.svg new file mode 100644 index 000000000..a9603e26d --- /dev/null +++ b/src/hemsedal24/images/sykling.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/tingogtangblob.svg b/src/hemsedal24/images/tingogtangblob.svg new file mode 100644 index 000000000..6e3a8ed53 --- /dev/null +++ b/src/hemsedal24/images/tingogtangblob.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/hemsedal24/images/top-blub-mobil.svg b/src/hemsedal24/images/top-blub-mobil.svg new file mode 100644 index 000000000..e7919617d --- /dev/null +++ b/src/hemsedal24/images/top-blub-mobil.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/top_blub.svg b/src/hemsedal24/images/top_blub.svg new file mode 100644 index 000000000..aea14bcf4 --- /dev/null +++ b/src/hemsedal24/images/top_blub.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/images/viaferrata.svg b/src/hemsedal24/images/viaferrata.svg new file mode 100644 index 000000000..a2a39ea61 --- /dev/null +++ b/src/hemsedal24/images/viaferrata.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/hemsedal24/index.tsx b/src/hemsedal24/index.tsx index b6f8fbe0e..81e8f338f 100644 --- a/src/hemsedal24/index.tsx +++ b/src/hemsedal24/index.tsx @@ -5,119 +5,171 @@ import arrowDown from './images/arrow-down.svg'; import arrowRight from './images/arrow-right.svg'; import Hero from './components/Hero' import Day from './components/Day' -import bigblobs from './images/Frame88.svg' import Link from 'next/link'; import bop from './images/bop.svg' -import secondbigblobs from './images/secondbigblobs.svg' +import topblub from './images/top_blub.svg' +import mobiletopblub from './images/top-blub-mobil.svg' +import bottomblub from './images/bottom_blub.svg' +import mobilebottomblub from "./images/bottom-blub-mobil.svg" +import pagebottomblub from "./images/pagebottomblob.svg" +import mobilepagebottomblub from "./images/mobilepagebottomblob.svg" +import resortbottom from './images/resortbottom.svg' +import { useState, useEffect } from 'react'; +import latter from './images/latter.svg' + + + + const Hemsedal24: NextPage = () => { + const [mobile, setMobile] = useState(false); + + useEffect(() => { + const handleWindowSizeChange = () => { + setMobile(window.innerWidth <= 500); + }; + + handleWindowSizeChange(); // Set initial value after component mounts + window.addEventListener('resize', handleWindowSizeChange); + + return () => window.removeEventListener('resize', handleWindowSizeChange); + }, []); return (
Hemsedal - +
Programmet for turen pil ned - + Ting du kanskje lurer på pil høyre
-
big blobs
+
big blobs
+
+
+

Hemsedal!!

+

Johooooooo!!! Eller chooo-choooo som toget til Hemsedal... + ikke kommer til å si siden det er elektrisk, men vi kan late som🤝 + Uansett! Årets Varianttur tar oss med opp på fjellet, + og her blir det hygge, kos, god mat og gøye aktiviteter💥

+

Under finner du programmet for turen, blabla mer her

+
koser seg
+
+
big blobs

Program

- -
    -
  • - Oppmøte på Flesland -
    • -
  • - Flyet går -
    • -
  • - Lander i Helsinki -
    • -
  • - Tog til sentrum -
    • -
  • - Innsjekk og faglig bolk på hotellet -
    • -
  • - Middag -
    • -
  • - 🍻 eller 😴 -
    • -
- - -
    -
  • - Frokost 😴 -
    • -
  • - Avgang fra hotellet -
    • -
  • - Felles aktivitet 🤫 -
    • -
  • - {' '} - - Valgfrie aktiviteter + +
      +
    • + Oppmøte på Flesland +
      • +
    • + Flyet går +
      • +
    • + Lander i Helsinki +
      • +
    • + Tog til sentrum +
      • +
    • + Innsjekk og faglig bolk på hotellet +
      • +
    • + Middag +
      • +
    • + 🍻 eller 😴 +
      • +
    +     + + +
      +
    • + Frokost 😴 +
      • +
    • + Avgang fra hotellet +
      • +
    • + Felles aktivitet 🤫 +
      • +
    • + + + + Valgfrie aktiviteter + + +
      • +
    • + Felles avgang til forfriskninger 🍾 +
      • +
    • + Middag 🤤 +
      • +
    • + Gøygøygøy 🕺 +
      • +
    +     - -
    • -
  • - Felles avgang til forfriskninger 🍾 -
    • -
  • - Middag 🤤 -
    • -
  • - Gøygøygøy 🕺 -
    • -
- - -
    -
  • - Frokost 😴 -
    • -
  • - Avgang fra hotellet -
    • -
  • - Felles aktivitet 🤫 -
    • -
  • - {' '} - - Valgfrie aktiviteter + +
      +
    • + Frokost 😴 +
      • +
    • + Avgang fra hotellet +
      • +
    • + Felles aktivitet 🤫 +
      • +
    • + + + + Valgfrie aktiviteter + + +
      • +
    • + Felles avgang til forfriskninger 🍾 +
      • +
    • + Middag 🤤 +
      • +
    • + Gøygøygøy 🕺 +
      • +
    +     - -
    • -
  • - Felles avgang til forfriskninger 🍾 -
    • -
  • - Middag 🤤 -
    • -
  • - Gøygøygøy 🕺 -
    • -
-
-
big blobs
-
big blobs
 +
big blobs
+
+
+
+

Det praktiske

+

Fýri Resort

+

Tlf: 31 00 15 60

+

Totteskogen 55, 3560 Hemsedal

+
+

Spørsmål underveis?

+

Soskom tlf: 999 999 999

+
+
resortbilde
+
+
big blobs
 +
- ); }; diff --git a/src/hemsedal24/tingogtang.tsx b/src/hemsedal24/tingogtang.tsx new file mode 100644 index 000000000..cecc53ae4 --- /dev/null +++ b/src/hemsedal24/tingogtang.tsx @@ -0,0 +1,54 @@ +import { NextPage } from "next"; +import styles from './hemsedal.module.css' +import Container from "./components/Container"; +import Link from "next/link"; +import arrowLeft from "./images/arrow-left.svg" +import blob from "./images/tingogtangblob.svg" +import snok from "./images/snok.svg" +import { useState, useEffect } from "react"; +import bop from './images/bop.svg' +const TingogTang: NextPage = () => { + const [mobile, setMobile] = useState(false); + + useEffect(() => { + const handleWindowSizeChange = () => { + setMobile(window.innerWidth <= 500); + }; + + handleWindowSizeChange(); // Set initial value after component mounts + window.addEventListener('resize', handleWindowSizeChange); + + return () => window.removeEventListener('resize', handleWindowSizeChange); + }, []); + return ( +
+ + + pil venste + Tilbake + +
+
blob
+

Ting og tang du kanskje lurer på

+
+
+
+ Noe du lurer på om turen? Du finner litt praktisk info her!🌟 + (Ikke hos takterrasse-naboen... Marie, Thomas og Andreas har allerede sjekket) +
+
+ Dersom det er noe annet du lurer så er det bare å huke tak i sin nærmeste Variant og spørre🤝 +
+
folk som snoker
+ +
+
big blobs
 + +
+ ); +}; + +export default TingogTang; \ No newline at end of file