diff --git a/src/summersplash2022/Content.tsx b/src/summersplash2022/Content.tsx index bb59e7743..130a1bcdc 100644 --- a/src/summersplash2022/Content.tsx +++ b/src/summersplash2022/Content.tsx @@ -1,402 +1,86 @@ -import React, { useEffect, useState } from 'react'; import style from './index.module.css'; -import style2 from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -import HandBooKPages from './utils/handBookPages'; -import ReadMoreArrow from './img/lesMerPil'; -import Header from './components/header/header'; -import PinkBlob from './img/pinkBlob'; -import GreenBlob from './nyutdannet/img/greenBlob'; -import AfterApplying, { - ApplyType, -} from './nyutdannet/sections/hvaSkjerEtterSonaadsfristen'; -import MoreInfo from './img/merInfo'; +import { HandbookPage } from './utils/handBookPages'; +import Apply from './sections/søkJobb'; +import { ApplyType } from './utils/utils'; +import AfterApplying from './sections/hvaSkjerEtterSonaadsfristen'; +import WhyVariant from './sections/hvorforAkkurattVariant'; +import LandingPage from './sections/forside'; +import omJobbenStyle from './sections/hvemSokerVi.module.css'; +import SummerstudentsQuotes from './sections/hvaSierSommerstudentene'; const Content = () => { - const blobSection1 = require('./img/section1Blob.png'); - const Marius = require('./img/Marius.png'); - const summerStudent1 = require('./img/emma.svg'); - const summerStudent2 = require('./img/mathias.svg'); - const summerStudent3 = require('./img/swarny.svg'); const norwayMap = require('./img/norway summer job.svg'); - // bildefiler finnes på https://www.figma.com/file/9130OrLEkCHn15Cq4BvPRP/Skisser?type=design&node-id=908-163&mode=design&t=Bg1HGOBmQhOpszRV-4 - - const [whichButtonSelected, setWhichButtonSelected] = useState(''); - const [isMobile, setIsMobile] = useState(false); - - const handleResize = () => { - setIsMobile(window.matchMedia('(max-width: 900px)').matches); - }; - - const handleOnClick = (buttonValue: string) => { - if (window.matchMedia('(max-width: 900px)').matches) { - } - - setWhichButtonSelected(buttonValue); - }; - - useEffect(() => { - setIsMobile(window.matchMedia('(max-width: 900px)').matches); - window.addEventListener('resize', handleResize); - if ( - window.matchMedia('(min-width: 2000px)').matches && - whichButtonSelected === '' - ) { - setWhichButtonSelected('Formal og verdier'); - } - }, []); return ( <>
-
-
-
-
-
- -

- Vi ser etter 23 sommervarianter i 2024! -

- -
-
-
-

Søk senest 1. oktober

-

- Søk sommerjobb -

-
-
-

Ferdig utdannet i 2024?

-

- Jeg vil ha fast jobb -

-
-
+ +
+

Hva går sommerjobben ut på?

+
+
+

+ En sommerjobb i Variant er en fin mulighet til å anvende det du + har lært på skolen i praksis. Det forventes ikke at du er + utlært, men at du ønsker å lære mer. I et tverrfaglig team + bestående av designere og utviklere kommer du til å jobbe på et + av de spennende kundeprosjektene vi har. Underveis får du god + oppfølging og tilrettelegging fra erfarne konsulenter som ønsker + at du lykkes. Sjekk ut{' '} + bloggen vår for å lese + mer om hva årets sommerstudenter jobbet med. +

-
- To fra Variant -
- -
+

+ I 2024 tilbyr vi sommerjobb i både Trondheim,{' '} + Oslo og Bergen, til + henholdsvis ti, ti og tre studenter. Hvor du vil jobbe bestemmer + du naturligvis selv. Sommerjobben varer i fire + to uker med tre + uker ferie i mellomtiden. +

-
- -
-
-
-
-

Hva går sommerjobben ut på?

-
-
-

- En sommerjobb i Variant er en fin mulighet til å anvende det - du har lært på skolen i praksis. Det forventes ikke at du er - utlært, men at du ønsker å lære mer. I et tverrfaglig team - bestående av designere og utviklere kommer du til å jobbe på - et av de spennende kundeprosjektene vi har. Underveis får du - god oppfølging og tilrettelegging fra erfarne konsulenter - som ønsker at du lykkes. Sjekk ut{' '} - bloggen vår for å lese - mer om hva årets sommerstudenter jobbet med. -

- -

- I 2024 tilbyr vi sommerjobb i både{' '} - Trondheim, Oslo og{' '} - Bergen, til henholdsvis ti, ti og tre - studenter. Hvor du vil jobbe bestemmer du naturligvis selv. - Sommerjobben varer i fire + to uker med tre uker ferie i - mellomtiden. -

- {isMobile ? ( -
- Vi ansetter 10 i Trondheim, 10 i Oslo og 3 i Bergen! -
- ) : ( - <> - )} -

- I Variant liker vi åpenhet. Det betyr at du selvsagt ikke - trenger å lure på hvordan kontrakten din vil se ut for - sommeren, den ligger nemlig åpent og tilgjengelig på våre - nettsider. Timelønnen trenger du heller ikke å lure på, den - er på 271,83kr (eller 100 - e - 🤓). Under “Hvorfor akkurat Variant?” ned kan du lese mer om - hva Variant står for og tilbyr. -

-
- {!isMobile ? ( - Vi ansetter 10 i Trondheim, 10 i Oslo og 3 i Bergen - ) : ( - <> - )} -
-
-
- -
-

Hva mener årets sommerstudenter?

-
+

+ I Variant liker vi åpenhet. Det betyr at du selvsagt ikke trenger + å lure på hvordan kontrakten din vil se ut for sommeren, den + ligger nemlig åpent og tilgjengelig på våre nettsider. Timelønnen + trenger du heller ikke å lure på, den er på 271,83kr (eller 100 + e + 🤓). Under “Hvorfor akkurat Variant?” ned kan du lese mer om hva + Variant står for og tilbyr. +

+
-
-

- “Jeg er utrolig glad for å få være en del av variantgjengen i - sommer! Det er gøy å se hvordan kjerneverdier som åpenhet og - læreglede virkelig praktiseres i arbeidshverdagen, ikke bare - på papiret. Det gjør at jeg føler meg veldig inkludert og - lærer masse, samtidig som vi har det mye moro!” -

-

-Emma

-
-
- -
-
- -

- “Sommeren i Variant ga meg en smakebit av hva det vil si å - være konsulent. Med ekte kunder og reelle behov lærte jeg - masse og fikk vist frem ferdighetene mine. Gjennom sosiale - arrangementer og pulserende Slack-kanaler følte jeg meg - inkludert allerede før dag én. Jevnlige sparringer ga faglig - påfyll og støtte til teamet, og folkene her er rett og slett - herlige 🤗” -

-

-Mathias

-
+
+
-
- summerstudent 3 -
-

- “Sommeren hos Variant har vært helt fantastisk. Vi fikk jobbe - med et megakult og aktuelt prosjekt med god oppfølging, både - fra Variant og kunden. Selv om Variant er et konsulentselskap, - har de et godt sosialt miljø hvor alle er inkluderende, ivrige - og åpne. Jeg er superfornøyd med at - jeg søkte sommerjobb hos Variant!!” -

-

-Swarny

-
-
- -
+ + -
-
-
-
-

Hvorfor akkurat Variant?

-

- Variant er en variant av et konsulentselskap som er raust, - åpent og læreglad. Disse verdiene ligger til grunn for - hvordan vi møter hverandre, våre kunder og alle andre. I - håndboken vår kan du lese om hvordan ting gjøres i Variant, - hva vi prøver å oppnå og hvorfor vi tenker som vi gjør. - Under kan du sjekke ut noen utvalgte temaer. -

- {/* If mobile set background else check if pressed before set background */} -
- - - - -
-
-

- Hva er viktigst for deg? -

- - Sjekk ut hele håndboka vår her - -
-
-
- {whichButtonSelected ? ( - - ) : ( - - )} -
-
-

- Hva er viktigst for deg? -

- - Sjekk ut hele håndboka vår her - -
-
-
-
-
- -
+ -
-

Søk sommerjobb

-
-
-

- Vi håper du søker, og vi ser frem til å bli bedre kjent med - deg. Har du spørsmål om sommerjobben eller Variant? Ta gjerne - kontakt med meg. -

-

- - Marius Krakeli, Chief Recruitment Officer -

-
-
-

- 41637572 -

-
-
-

|

-
-

- mk@variant.no -

-
-
-
- Bilde av Marius -
- -
- Bilde av Marius -
-
-
-
+
); diff --git a/src/summersplash2022/components/header/headerBlack.module.css b/src/summersplash2022/components/header/headerBlack.module.css index d1cdf356d..c95e8c9f5 100644 --- a/src/summersplash2022/components/header/headerBlack.module.css +++ b/src/summersplash2022/components/header/headerBlack.module.css @@ -9,8 +9,6 @@ max-width: 50rem; margin: 0 auto; margin-left: 0px; - min-height: 100vh; - min-height: -webkit-fill-available; } .main__innerFullWidth { diff --git a/src/summersplash2022/img/Marius.png b/src/summersplash2022/img/Marius.png deleted file mode 100644 index 2488e8476..000000000 Binary files a/src/summersplash2022/img/Marius.png and /dev/null differ diff --git a/src/summersplash2022/img/MountainImg.png b/src/summersplash2022/img/MountainImg.png new file mode 100644 index 000000000..60afc7c42 Binary files /dev/null and b/src/summersplash2022/img/MountainImg.png differ diff --git a/src/summersplash2022/img/Nora summerstudent.png b/src/summersplash2022/img/Nora summerstudent.png deleted file mode 100644 index 8d849b32d..000000000 Binary files a/src/summersplash2022/img/Nora summerstudent.png and /dev/null differ diff --git a/src/summersplash2022/img/Olepetter summerstudent.png b/src/summersplash2022/img/Olepetter summerstudent.png deleted file mode 100644 index 8d7df07d4..000000000 Binary files a/src/summersplash2022/img/Olepetter summerstudent.png and /dev/null differ diff --git a/src/summersplash2022/img/SommerjobbSVG.tsx b/src/summersplash2022/img/SommerjobbSVG.tsx deleted file mode 100644 index 978314297..000000000 --- a/src/summersplash2022/img/SommerjobbSVG.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -const SummerJob = () => { - return ( - - - - ); -}; - -export default SummerJob; diff --git a/src/summersplash2022/img/Vilde summerstudent.png b/src/summersplash2022/img/Vilde summerstudent.png deleted file mode 100644 index 3362e0f1d..000000000 Binary files a/src/summersplash2022/img/Vilde summerstudent.png and /dev/null differ diff --git a/src/summersplash2022/img/applyImgWithBlob.tsx b/src/summersplash2022/img/applyImgWithBlob.tsx new file mode 100644 index 000000000..9816d81ad --- /dev/null +++ b/src/summersplash2022/img/applyImgWithBlob.tsx @@ -0,0 +1,39 @@ +import style from '../sections/søkJobb.module.css'; + +const ApplyImgWithBlob = ({ color }: { color: string }) => { + return ( + + + + + + + + + + + ); +}; + +export default ApplyImgWithBlob; diff --git a/src/summersplash2022/img/arrowDown.tsx b/src/summersplash2022/img/arrowDown.tsx new file mode 100644 index 000000000..12e773611 --- /dev/null +++ b/src/summersplash2022/img/arrowDown.tsx @@ -0,0 +1,30 @@ +const ArrowDown = ({ color }: { color: string }) => { + return ( + + + + + + + + + + + ); +}; + +export default ArrowDown; diff --git a/src/summersplash2022/nyutdannet/img/section6Blob.tsx b/src/summersplash2022/img/darkBeigeBlob.tsx similarity index 91% rename from src/summersplash2022/nyutdannet/img/section6Blob.tsx rename to src/summersplash2022/img/darkBeigeBlob.tsx index 82d08a78f..232561c17 100644 --- a/src/summersplash2022/nyutdannet/img/section6Blob.tsx +++ b/src/summersplash2022/img/darkBeigeBlob.tsx @@ -1,4 +1,4 @@ -const Section6Blob = () => { +const DarkBeigeBlob = () => { return ( { ); }; -export default Section6Blob; +export default DarkBeigeBlob; diff --git a/src/summersplash2022/nyutdannet/img/section5Blob.tsx b/src/summersplash2022/img/darkPinkBlob.tsx similarity index 82% rename from src/summersplash2022/nyutdannet/img/section5Blob.tsx rename to src/summersplash2022/img/darkPinkBlob.tsx index 41093bf95..8b32eaae9 100644 --- a/src/summersplash2022/nyutdannet/img/section5Blob.tsx +++ b/src/summersplash2022/img/darkPinkBlob.tsx @@ -1,8 +1,6 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -const Section5Blob = () => { +const DarkPinkBlob = () => { return ( { ); }; -export default Section5Blob; +export default DarkPinkBlob; diff --git a/src/summersplash2022/img/fastjobbSVG.tsx b/src/summersplash2022/img/fastjobbSVG.tsx deleted file mode 100644 index 959c897d0..000000000 --- a/src/summersplash2022/img/fastjobbSVG.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import style from '../index.module.css'; - -const Job = () => { - return ( - - - - ); -}; - -export default Job; diff --git a/src/summersplash2022/img/fastjobbSVGSelected.tsx b/src/summersplash2022/img/fastjobbSVGSelected.tsx deleted file mode 100644 index 6ce26a6b6..000000000 --- a/src/summersplash2022/img/fastjobbSVGSelected.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -const JobSelected = () => { - return ( - - - - - - - - - - - - - - - - - ); -}; - -export default JobSelected; diff --git a/src/summersplash2022/img/graduate norway map.svg b/src/summersplash2022/img/graduate norway map.svg new file mode 100644 index 000000000..1e85e263d --- /dev/null +++ b/src/summersplash2022/img/graduate norway map.svg @@ -0,0 +1,128 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/summersplash2022/nyutdannet/img/graduate timeline.svg b/src/summersplash2022/img/graduate timeline.svg similarity index 100% rename from src/summersplash2022/nyutdannet/img/graduate timeline.svg rename to src/summersplash2022/img/graduate timeline.svg diff --git a/src/summersplash2022/img/graduateToggleArrow.tsx b/src/summersplash2022/img/graduateToggleArrow.tsx new file mode 100644 index 000000000..ffbd89fb4 --- /dev/null +++ b/src/summersplash2022/img/graduateToggleArrow.tsx @@ -0,0 +1,25 @@ +import style from 'src/summersplash2022/sections/forside.module.css'; + +const GraduateToggleArrow = () => { + return ( + + + + + ); +}; + +export default GraduateToggleArrow; diff --git a/src/summersplash2022/img/greenBlob.tsx b/src/summersplash2022/img/greenBlob.tsx new file mode 100644 index 000000000..bfc87d49f --- /dev/null +++ b/src/summersplash2022/img/greenBlob.tsx @@ -0,0 +1,21 @@ +const GreenBlob = ({ className }: { className: string }) => { + return ( + + + + ); +}; + +export default GreenBlob; diff --git a/src/summersplash2022/img/landingpageImgWithBlob.tsx b/src/summersplash2022/img/landingpageImgWithBlob.tsx new file mode 100644 index 000000000..71813ad7b --- /dev/null +++ b/src/summersplash2022/img/landingpageImgWithBlob.tsx @@ -0,0 +1,65 @@ +import style from '../sections/forside.module.css'; + +const LandingPageImgWithBlob = () => { + return ( + + + + + + + + + + + + + + + + ); +}; +export default LandingPageImgWithBlob; diff --git a/src/summersplash2022/img/lesMerPil.tsx b/src/summersplash2022/img/lesMerPil.tsx deleted file mode 100644 index f53d0503a..000000000 --- a/src/summersplash2022/img/lesMerPil.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import style from '../index.module.css'; - -const ReadMoreArrow = () => { - return ( -
- - Read more arrow - - - - -
- ); -}; -export default ReadMoreArrow; diff --git a/src/summersplash2022/img/mapMobile.tsx b/src/summersplash2022/img/mapMobile.tsx deleted file mode 100644 index 0472d22bd..000000000 --- a/src/summersplash2022/img/mapMobile.tsx +++ /dev/null @@ -1,717 +0,0 @@ -import style from '../index.module.css'; - -const MapMobile = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default MapMobile; diff --git a/src/summersplash2022/img/merInfo.tsx b/src/summersplash2022/img/merInfo.tsx index f5fbe64b4..e9b93dd88 100644 --- a/src/summersplash2022/img/merInfo.tsx +++ b/src/summersplash2022/img/merInfo.tsx @@ -1,4 +1,4 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; +import style from 'src/summersplash2022/sections/forside.module.css'; const MoreInfo = (props: { white: boolean }) => { if (props.white) { return ( diff --git "a/src/summersplash2022/nyutdannet/img/m\303\270rker\303\270dBlob.tsx" "b/src/summersplash2022/img/m\303\270rker\303\270dBlob.tsx" similarity index 100% rename from "src/summersplash2022/nyutdannet/img/m\303\270rker\303\270dBlob.tsx" rename to "src/summersplash2022/img/m\303\270rker\303\270dBlob.tsx" diff --git a/src/summersplash2022/img/newVariants.tsx b/src/summersplash2022/img/newVariants.tsx deleted file mode 100644 index 5a4d2e3b2..000000000 --- a/src/summersplash2022/img/newVariants.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import style from '../index.module.css'; -const NewVariants = () => { - return ( - - Section 1 header - - - - - - - - - - - - - - - - ); -}; - -export default NewVariants; diff --git a/src/summersplash2022/img/norway summer job.svg b/src/summersplash2022/img/norway summer job.svg index 86a1a2359..f4d5e3872 100644 --- a/src/summersplash2022/img/norway summer job.svg +++ b/src/summersplash2022/img/norway summer job.svg @@ -1,104 +1,105 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/summersplash2022/img/pinkBlob.tsx b/src/summersplash2022/img/pinkBlob.tsx index f38790d72..73d06b321 100644 --- a/src/summersplash2022/img/pinkBlob.tsx +++ b/src/summersplash2022/img/pinkBlob.tsx @@ -1,19 +1,15 @@ -import style from 'src/summersplash2022/index.module.css'; const PinkBlob = () => { return ( ); diff --git a/src/summersplash2022/img/sommerjobbSVGSelected.tsx b/src/summersplash2022/img/sommerjobbSVGSelected.tsx deleted file mode 100644 index 6053ff00f..000000000 --- a/src/summersplash2022/img/sommerjobbSVGSelected.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import style from '../index.module.css'; - -const SummerjobSelected = () => { - return ( - - - - - - - - - - - - - - - - - ); -}; - -export default SummerjobSelected; diff --git a/src/summersplash2022/img/sommerstudent1.png b/src/summersplash2022/img/sommerstudent1.png deleted file mode 100644 index 975e3cc8f..000000000 Binary files a/src/summersplash2022/img/sommerstudent1.png and /dev/null differ diff --git a/src/summersplash2022/img/summerjobToggleArrow.tsx b/src/summersplash2022/img/summerjobToggleArrow.tsx new file mode 100644 index 000000000..34b5e27a2 --- /dev/null +++ b/src/summersplash2022/img/summerjobToggleArrow.tsx @@ -0,0 +1,25 @@ +import style from 'src/summersplash2022/sections/forside.module.css'; + +const SummerjobToggleArrow = () => { + return ( + + + + + ); +}; + +export default SummerjobToggleArrow; diff --git "a/src/summersplash2022/img/s\303\270kSomDesigner.tsx" "b/src/summersplash2022/img/s\303\270kSomDesigner.tsx" deleted file mode 100644 index 68904b758..000000000 --- "a/src/summersplash2022/img/s\303\270kSomDesigner.tsx" +++ /dev/null @@ -1,27 +0,0 @@ -import style from 'src/summersplash2022/index.module.css'; -const ApplyAsDesigner = () => { - return ( - - Apply as designer blob - - - - ); -}; - -export default ApplyAsDesigner; diff --git "a/src/summersplash2022/img/s\303\270kSomUtviklerBlob.tsx" "b/src/summersplash2022/img/s\303\270kSomUtviklerBlob.tsx" deleted file mode 100644 index e06515c35..000000000 --- "a/src/summersplash2022/img/s\303\270kSomUtviklerBlob.tsx" +++ /dev/null @@ -1,25 +0,0 @@ -import style from 'src/summersplash2022/index.module.css'; -const ApplyAsDeveloper = () => { - return ( - - Apply as developer blob - - - - ); -}; - -export default ApplyAsDeveloper; diff --git a/src/summersplash2022/img/tidslinje.tsx b/src/summersplash2022/img/tidslinje.tsx deleted file mode 100644 index 950e58506..000000000 --- a/src/summersplash2022/img/tidslinje.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -const TimeLine = () => { - return ( - - - Søknadsfrist 2. Oktber, Kaffeprat, Tilbud om jobb, Sosiale og faglige - arrangementer, oppstart 1. august - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default TimeLine; diff --git a/src/summersplash2022/img/tidslinje2Mobil.tsx b/src/summersplash2022/img/tidslinje2Mobil.tsx deleted file mode 100644 index 93660db25..000000000 --- a/src/summersplash2022/img/tidslinje2Mobil.tsx +++ /dev/null @@ -1,189 +0,0 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; - -const TimeLine2Mobile = () => { - return ( - - - {' '} - August - Startskudd Alle nyutdannede samles til en oppstartsuke med - faglig og sosialt innhold. Oktober - Designverktøy/Rammeverk Utviklerne - jobber med HTML, CSS og JS, mens designerene går gjennom de vanligste - designverktøyene, som Figma og Illustrator. November - Tverrfaglig - samarbeid Samling med fokus på hvordan designere og utviklere best kan - samarbeide. Februar - Consulting for varianter Samling med fokus på - konsulentrollen og konsulentferdigheter. Mars - Designsprint/Sky - Designerne jobber med variants designsprint, og utviklerne jobber med - skyløsninger og utfordringer knyttet til dette. Mars - Designsprint/Sky - Designerne jobber med variants designsprint, og utviklerne jobber med - skyløsninger og utfordringer knyttet til dette. Mai - Konsulentøkonomi - De nyutdannede introduseres til konsulentøkonomi og økonomi i Variant. - Dyktig(ere) konsulent - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default TimeLine2Mobile; diff --git a/src/summersplash2022/img/tidslinjeNarrow.tsx b/src/summersplash2022/img/tidslinjeNarrow.tsx new file mode 100644 index 000000000..78b93bf7a --- /dev/null +++ b/src/summersplash2022/img/tidslinjeNarrow.tsx @@ -0,0 +1,182 @@ +import style from 'src/summersplash2022/index.module.css'; + +const TimelineNarrow = () => { + return ( + + + August - Startskudd Alle nyutdannede samles til en oppstartsuke med + faglig og sosialt innhold. Oktober - Designverktøy/Rammeverk Utviklerne + jobber med HTML, CSS og JS, mens designerene går gjennom de vanligste + designverktøyene, som Figma og Illustrator. November - Tverrfaglig + samarbeid Samling med fokus på hvordan designere og utviklere best kan + samarbeide. Februar - Consulting for varianter Samling med fokus på + konsulentrollen og konsulentferdigheter. Mars - Designsprint/Sky + Designerne jobber med variants designsprint, og utviklerne jobber med + skyløsninger og utfordringer knyttet til dette. Mars - Designsprint/Sky + Designerne jobber med variants designsprint, og utviklerne jobber med + skyløsninger og utfordringer knyttet til dette. Mai - Konsulentøkonomi + De nyutdannede introduseres til konsulentøkonomi og økonomi i Variant. + Dyktig(ere) konsulent + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default TimelineNarrow; diff --git a/src/summersplash2022/img/tidslinjeWide.tsx b/src/summersplash2022/img/tidslinjeWide.tsx new file mode 100644 index 000000000..ffb3b537c --- /dev/null +++ b/src/summersplash2022/img/tidslinjeWide.tsx @@ -0,0 +1,181 @@ +import style from 'src/summersplash2022/index.module.css'; + +const TimelineWide = () => { + return ( + + + August - Startskudd Alle nyutdannede samles til en oppstartsuke med + faglig og sosialt innhold. Oktober - Designverktøy/Rammeverk Utviklerne + jobber med HTML, CSS og JS, mens designerene går gjennom de vanligste + designverktøyene, som Figma og Illustrator. November - Tverrfaglig + samarbeid Samling med fokus på hvordan designere og utviklere best kan + samarbeide. Februar - Consulting for varianter Samling med fokus på + konsulentrollen og konsulentferdigheter. Mars - Designsprint/Sky + Designerne jobber med variants designsprint, og utviklerne jobber med + skyløsninger og utfordringer knyttet til dette. Mars - Designsprint/Sky + Designerne jobber med variants designsprint, og utviklerne jobber med + skyløsninger og utfordringer knyttet til dette. Mai - Konsulentøkonomi + De nyutdannede introduseres til konsulentøkonomi og økonomi i Variant. + Dyktig(ere) konsulent + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default TimelineWide; diff --git a/src/summersplash2022/index.module.css b/src/summersplash2022/index.module.css index 840afdd54..74c6dbe22 100644 --- a/src/summersplash2022/index.module.css +++ b/src/summersplash2022/index.module.css @@ -1,18 +1,18 @@ -/* Felles styling*/ -.section2, -.section3, -.section5, -.section6, -.whyWorkAtVariant { - padding: 10%; - padding-top: 5%; - margin-bottom: 0%; +/* global var */ +:root { + --recoleta-font-family: 'Recoleta'; + --graphik-font-family: 'Graphik Web'; } -/* Scroll */ - -/* 900px*/ +/* Felles styling*/ +section { + scroll-snap-align: start; + padding: 5rem 10rem; + min-height: 100vh; + overflow: hidden; +} +/* SnapScroll */ .scrollContainer { width: 100%; height: 100%; @@ -29,1274 +29,90 @@ overflow-y: hidden; } -.section1, -.section2, -.section3, -.whyWorkAtVariant, -.section5, -.section6 { - scroll-snap-align: start; -} - -/* SVG Style*/ -.maskStyling { - mask-type: alpha; -} - -/* Fonts */ -.søkHer, -.scroll { - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 500; - font-size: 18px; - line-height: 34px; - margin-top: 1%; -} - -.eller { - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 34px; - margin-top: 1%; -} - -.heading { - margin-bottom: 20px; - font-family: 'Recoleta'; - font-style: normal; - font-weight: 400; - font-size: 32px; - line-height: 39px; -} - -.bigHeading { - font-family: 'Recoleta'; - font-style: normal; - font-weight: 400; - font-size: 62px; - line-height: 84px; - width: 60%; - margin-top: 5%; - margin-bottom: 5%; - /* or 135% */ -} - -.section2Heading, -.section3Heading, -.section4Heading, -.section5Heading, -.section6Heading, -.handbookHeaderDeskotop { - margin-bottom: 20px; - font-family: 'Recoleta'; - font-style: normal; - font-weight: 400; - font-size: 32px; - line-height: 39px; -} - -.mostImportantForYou { - font-family: 'Recoleta'; - font-style: normal; - font-weight: 500; - font-size: 20px; - line-height: 28px; -} - -.section6Paragraph, -.section6Paragraph2, -.handbookRef, -.positionTextLeft, -.section2Paragraph, -.section5Paragraph { - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 400; - font-size: 20px; - line-height: 32px; -} - -.whyWorkAtVariant p { - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 400; - font-size: 20px; - line-height: 32px; -} - -/* Header */ - -/* Section 1 styling*/ - -.section1 { - height: 1200px; - background-color: #f4f1e7; - padding: 10%; - padding-top: 0%; -} - -.header { - height: 80px; -} - -.section1H3 { - font-family: 'Recoleta'; - font-style: normal; - font-weight: 400; - font-size: 32px; - line-height: 53px; - margin-top: 5%; -} - -.in2023 { - font-family: 'Recoleta'; - font-style: normal; - font-weight: 400; - font-size: 32px; - line-height: 53px; - margin-top: 0px; -} - -.underHeader { - margin-top: 5%; -} - -.imageBlob1 { - position: relative; - width: 45%; - z-index: 1; - top: 500px; -} - -.pinkBlob { - position: relative; - z-index: 0; - /* width: 50%; - bottom: 170px; - right: 60px; */ -} - -.section1Blobs { - position: relative; - left: 55%; - bottom: 70%; - pointer-events: none; -} - -.moreInfoDiv { - position: relative; - text-align: center; - bottom: 850px; -} - -/* Section 2 styling*/ -.section2 { +/* Headings and fonts */ +h1 { width: 100%; - color: white; - padding-bottom: 20%; - height: auto; + max-width: 44rem; + background: linear-gradient( + to right, + var(--color-primary), + var(--color-secondary1__tint1), + var(--color-secondary2__shade1) + ); + background-size: 100% 100%; + background-clip: text; + font-size: 5.4rem; } -.blogpostLink { - color: white; - text-decoration: underline; +h2 { + font-size: 2rem; + margin-bottom: 1.8rem; } -.section2Color { - background-color: #1a1837; -} - -.section2Div2 { - margin-top: 20%; -} - -.section2Paragraph { - width: 74%; -} - -.section2Text { - width: 60%; -} - -.section2Flex { - display: flex; - flex-direction: row; -} - -.officeMapMobile { - display: none; -} - -/* Section 3 styling */ - -.section3 { - background-color: #01574f; - color: white; - height: 1600px; -} - -.summerstudent1 { - display: flex; - position: static; - margin-top: 4em; -} - -.summerstudent2 { - display: flex; - position: relative; - bottom: 100px; - margin-top: 4em; -} - -.summerstudent3 { - display: flex; - position: relative; - bottom: 100px; - margin-top: 3em; -} - -.summerstudent1picture { - position: relative; - margin-top: 5%; - margin-left: 7%; - width: 30%; - height: 30%; -} - -.summerstudent2picture { - position: relative; - width: 32%; - margin-right: 10%; - float: right; - z-index: 1; -} - -.summerstudent3picture { - position: relative; - width: 37%; - height: 37%; - bottom: 150px; - padding-right: 2em; -} - -.summerstudent1Paragraph, -.summerstudent2Paragraph, -.summerstudent3Paragraph, -.summerstudentName, -.summerstudentName1, -.summerstudentName2 { - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 26px; - position: relative; -} - -.summerstudentName, -.summerstudentName1, -.summerstudentName2 { - font-family: 'Recoleta'; -} - -.summerstudent1Paragraph { - width: 50%; - padding-top: 15%; -} - -.summerstudent2Paragraph { - padding-top: 8%; - margin-left: 10%; - width: 40%; - text-align: right; - margin-bottom: 8%; -} - -.summerstudentName2 { - width: 50%; - text-align: right; -} - -.summerstudent3Paragraph { - width: 50%; - padding-top: 2%; -} - -.greenBlob { - position: relative; - bottom: 1150px; - left: 67%; - width: 50%; -} - -/* Section 5 styling */ -.section5 { - background-color: #8b0f40; - color: white; -} - -.section5HeadingH4 { - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 700; - font-size: 18px; - line-height: 27px; - position: relative; +h3 { + font-size: 1.8rem; + margin-bottom: 1.8rem; } -.section5Paragraph { - width: 100%; -} - -.section5ParagraphLeft { - width: 56%; - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 400; - font-size: 20px; - line-height: 26px; -} - -.Even { - margin-top: 12%; - position: relative; - z-index: 0; -} - -.flexTimeline { - display: flex; - align-items: flex-start; - justify-content: left; -} - -.timeLine { - display: flex; - justify-content: center; -} - -.søknadstips { - margin-top: 20%; - margin-top: 120px; - margin-bottom: 30%; -} - -.section5Div1 { - width: 50%; -} - -.section5Div2 { - width: 100%; - padding-top: 10%; -} - -/* Section 6 styling*/ - -.section6 { - background-color: #f4f1e7; - height: 1200px; -} - -.section6Paragraph { - width: 40%; - margin-top: 20px; -} -.wrapper .radio-button-wrapper { - border: none; -} - -.contactInfo { - margin-top: 2%; - display: flex; - flex-direction: row; - align-items: flex-start; - gap: 20px; -} - -.ApplyAsDesignerDiv, -.ApplyAsDeveloperDiv { - width: 20%; - margin: 20px; - height: 200px; -} - -.applyAsDesignerSVG:hover path:nth-child(2) { - fill: rgb(3, 205, 186); -} - -.applyAsDeveloperSVG:hover path:nth-child(2) { - fill: rgb(255, 82, 150); -} - -.ApplyAsDeveloperDiv { - position: relative; - left: 300px; - bottom: 600px; -} - -.ApplyAsDesignerDiv { - position: relative; - bottom: 500px; -} -.Marius { - z-index: 1; - width: 35%; - position: relative; - left: 45%; - bottom: 400px; -} - -.positionTextLeft, -.handbookParagraphs { - padding-top: 1%; - width: 500px; - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 27px; -} - -.handbookParagraphs { - width: 68%; -} - -.section5Heading { - padding-top: 1%; - padding-bottom: 2%; - width: 68%; -} - -.section5Heading { - font-family: 'Recoleta'; - font-style: normal; - font-weight: 400; - font-size: 32px; - line-height: 59px; -} - -.officeMap { - position: relative; - margin-left: 40%; - margin-bottom: 30%; -} -.officeMap { - position: relative; - right: 10%; -} -.officeMapSVG { - width: auto; -} - -.mostImportantForYou { - padding-top: 10%; -} - -.handbook { - display: flex; - align-items: flex-start; - gap: 5%; - justify-content: left; -} - -.handbookPages p { - width: 100%; -} - -.handbookChildButton { - width: 60%; -} - -.handbookPages { - width: 50%; -} - -.handbookChildButton p { - width: 100%; -} - -.whyWorkAtVariant { - background-color: #fff3f2; - height: 1000px; -} - -.handbookGrid { - padding-top: 10%; - padding-bottom: 10%; -} - -.handbookGrid button { - margin-right: 2%; -} - -.handbookChildButton { - display: flex; - text-align: left; - flex-direction: column; - justify-content: center; - gap: 10%; -} - -.handbookButton1 { - color: #333333; - background: none; - border: none; - margin-top: 4%; - padding: 3% 3%; - text-align: left; - cursor: pointer; - white-space: nowrap; - max-width: fit-content; - display: grid; -} - -.handbookButton1:hover, -.handbookButton1:focus { - color: #333333; - background: #03dac6; - border: none; - margin-top: 4%; - padding: 3% 3%; - text-align: left; - cursor: pointer; - white-space: nowrap; -} - -.handbookButton2 { - color: #333333; - background: none; - border: none; - margin-top: 4%; - padding: 3% 3%; - text-align: left; - cursor: pointer; - white-space: nowrap; - max-width: fit-content; - display: grid; -} - -.handbookButton2:hover, -.handbookButton2:focus { - color: #333333; - background: #9591ce; - border: none; - margin-top: 4%; - padding: 3% 3%; - text-align: left; - cursor: pointer; - white-space: nowrap; -} - -.handbookButton3 { - color: #333333; - background: none; - border: none; - margin-top: 4%; - padding: 3% 3%; - text-align: left; - cursor: pointer; - white-space: nowrap; - max-width: fit-content; - display: grid; -} - -.handbookButton3:hover, -.handbookButton3:focus { - color: #333333; - background: #b91456; - border: none; - margin-top: 4%; - padding: 3% 3%; - text-align: left; - cursor: pointer; - white-space: nowrap; -} - -.handbookButton4 { - color: #333333; - background: none; - border: none; - margin-top: 4%; - padding: 3% 3%; - text-align: left; - cursor: pointer; - white-space: nowrap; - max-width: fit-content; - display: grid; -} - -.handbookButton4:hover, -.handbookButton4:focus { - color: #333333; - background: #ffc4bc; - border: none; - margin-top: 4%; - padding: 3% 3%; - text-align: left; - cursor: pointer; - white-space: nowrap; -} - -.section5HandbookLinkMobile { - display: none; -} - -.readMoreArrow { - position: relative; - right: 300px; - top: 130px; -} - -@media (max-width: 720px) { - /* Heading Mobile */ - .heading { - font-family: 'Recoleta'; - font-style: normal; - font-weight: 500; - font-size: 24px; - line-height: 33px; - } - - .bigHeading { - width: 100%; - font-family: 'Recoleta'; - font-style: normal; - font-weight: 400; - font-size: 38px; - line-height: 52px; - } - - p, - .section2Paragraph, - .whyWorkAtVariant p, - .section6 p { - font-size: 16px; - line-height: 23px; - } - - .section3 { - overflow: hidden; - } - - .handbookChildButton { - width: auto; - } - - .handbookChildButton p { - width: auto; - } - - .section5 { - height: 2400px; - overflow: hidden; - } - - .søknadstips { - position: relative; - left: 0px; - right: 5px; - } - - .section6 { - height: 1100px; - } - - /* Position to static */ - .imageBlob1 { - position: static; - } - - .section5ParagraphLeft { - position: static; - } - - .timeLine { - position: static; - } - - .officeMapMobile { - display: block; - position: static; - margin: 0; - width: 100%; - /* bottom: 50px; */ - } - - .officeMapSVG { - display: none; - } - - .imageBlob1 { - position: static; - width: 10px; - } - - .handbook { - display: block; - } - - .handbookPages { - width: 100%; - } - - .handbookChildButton { - display: block; - } - - .readMoreArrow { - display: none; - } - - .handbookGrid { - display: flex; - flex-direction: wrap; - flex-wrap: wrap; - width: 100%; - margin-top: 5%; - } - - .handbookHeaderDeskotop { - display: none; - } - - .mostImportantForYou { - font-family: 'Recoleta'; - font-style: normal; - font-weight: 400; - font-size: 32px; - line-height: 39px; - padding-bottom: 5%; - } - - .section5HandbookLink { - display: none; - } - - .section5HandbookLinkMobile { - display: block; - } - - .section5ParagraphRight { - position: static; - } - - .map { - width: 100%; - height: auto; - } - - .newVariantsSVG { - width: 100%; - height: auto; - } - - .summerstudent1 { - display: block; - } - - .flexTimeline { - display: block; - } - - .section5ParagraphLeft { - width: 100%; - } - - .positionTextSubLeft, - .section5Heading { - padding-top: 1%; - padding-bottom: 2%; - width: 100%; - font-family: 'Graphik Web'; - font-style: normal; - } - - .positionTextLeft { - padding-top: 1%; - width: 100%; - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 27px; - } - - .section6Paragraph { - width: 100%; - margin-top: 20px; - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 26px; - } - - .section5Paragraph { - width: 100%; - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 26px; - } - - .section5HeadingH4 { - padding-top: 5%; - } - - .timeLine { - position: relative; - bottom: 400px; - margin-top: 0%; - } - - .søknadstips { - bottom: 400px; - } - - /* Section 1 mobile*/ - .section1 { - overflow: hidden; - height: 1200px; - } - - .summerjobSelected { - width: 100%; - max-width: fit-content; - } - - .job { - width: 100%; - max-width: fit-content; - } - - .section1Blobs { - position: static; - } - - .h4Section1 { - margin-top: 0px; - font-family: 'Recoleta'; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 29px; - } - - .søkHer, - .eller, - .scroll { - display: none; - } - - .imageBlob1 { - position: relative; - /* margin-top: 70%; */ - height: 350px; - width: auto; - z-index: 1; - top: 300px; - left: 0px; - } - - .pinkBlob { - height: 450px; - width: auto; - position: relative; - bottom: 100px; - left: 10px; - z-index: 0; - } - - .newVariantsSVG { - width: 90%; - } - - .h4Section1, - .searchNewVariants { - margin-right: 5%; - /* margin-left: 5%; */ - } - - .moreInfoDiv { - bottom: 700px; - } - - /* Section 2 mobile*/ - .section2 { - height: 1300px; - width: 100%; - } - - .section2Text { - width: auto; - } - - .section2Heading { - font-family: 'Recoleta'; - font-style: normal; - font-weight: 500; - font-size: 24px; - line-height: 33px; - padding: 5%; - } - - .section2Paragraph { - width: 100%; - } - - /* Section 3 mobile*/ - .section3Heading { - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 400; - font-size: 130%; - line-height: 27px; - padding: 5%; - } - - .section3 { - height: 1400px; - } - - .summerstudent1 { - display: static; - padding-bottom: 15%; - position: relative; - overflow-wrap: break-word; - } - .summerstudent2 { - padding-bottom: 15%; - display: static; - position: relative; - bottom: 0px; - } - - .summerstudent3 { - display: flex; - position: relative; - bottom: 0px; - right: 15%; - } - .summerstudentName1 { - position: relative; - right: 10%; - padding-left: 10%; - } - - .summerstudentName2 { - text-align: left; - } - - .summerstudent1Paragraph, - .summerstudent2Paragraph, - .summerstudent3Paragraph { - position: static; - width: 80%; - height: fit-content; - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 400; - font-size: 12px; - line-height: 18px; - } - - .summerstudent1Paragraph { - position: relative; - padding-top: 12%; - width: 100%; - right: 18%; - padding-left: 15%; - } - - .summerstudent2Paragraph { - text-align: left; - padding-top: 5%; - margin: 0; - width: 100%; - } - - .summerstudent3Paragraph { - padding-top: 16%; - width: 100%; - } - - .summerstudent1picture { - width: 60%; - height: auto; - shape-outside: circle() padding-box; - float: left; - right: 20%; - position: relative; - } - - .summerstudent2picture { - width: 60%; - float: right; - shape-outside: circle() padding-box; - height: auto; - margin: 0px; - } - - .summerstudent3picture { - width: 60%; - /* height: 40%; */ - float: left; - position: relative; - bottom: 20%; - } - - .greenBlob { - position: relative; - bottom: 75%; - left: 67%; - width: 50%; - } - - /* Section 4 mobile*/ - .whyWorkAtVariant { - } - - .section4Heading { - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 400; - font-size: 130%; - line-height: 25px; - background-color: #423d89; - color: white; - padding: 5%; - } - - .handbookParagraphs { - width: 100%; - } - - /* Section 5 mobile*/ - - .section5Heading { - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 400; - font-size: 130%; - line-height: 27px; - padding: 5%; - background-color: #03dac6; - color: black; - } - - .section5Color { - background: black; - } - - .EvenPicture { - position: relative; - width: 70%; - display: flex; - margin: auto; - } - - .timeLine { - margin-top: 100px; - } - - /* Section 6 mobile */ - - .section6Flex { - display: block; - align-items: flex-start; - order: 1; - flex-direction: row-reverse; - } - .section6Heading { - font-family: 'Graphik Web'; - font-style: normal; - font-weight: 400; - font-size: 130%; - line-height: 27px; - background-color: #b7b4de; - padding: 5%; - margin-bottom: 10%; - } - - .section6Text { - width: 80%; - } - - .Marius { - width: 100%; - top: 0px; - left: 0px; - } - - .contactInfo { - gap: 3px; +@media (max-width: 1300px) { + section { + padding: 3.4rem 4rem; } } -@media (min-width: 1919px) { - .pinkBlob { - width: 700px; - height: auto; +@media (max-width: 800px) { + section { + padding: 3rem; } - .imageBlob1 { - top: 700px; + h1 { + font-size: 2.8rem; } - .section1 { - height: 1600px; - } - - .section3 { - height: 1700px; - } - - .timeLine svg { - width: 50%; + p { + font-size: 1.2rem; } } - -@media (min-width: 1930px) { - .timeLine svg { - width: 30%; - } +/* Color schemas for sections */ +.sectionDarkBlue, +.sectionDarkBlue button, +.sectionDarkBlue a { + background-color: var(--color-secondary1__shade3); + color: var(--color-standard__white); } -@media (min-width: 2150px) { - .heading, - .handbookHeaderDeskotop { - font-size: 300%; - line-height: 200%; - } - - .handbookHeaderDeskotop { - padding: 0px; - } - - p, - .section2Paragraph, - .whyWorkAtVariant p, - .section6 p { - font-size: 150%; - line-height: 150%; - } - - /* Section 1 */ - .section1 p { - font-size: 150%; - line-height: 150%; - } - - .moreInfoDiv { - display: none; - } - - .imageBlob1 { - position: relative; - top: 700px; - width: 40%; - } - - .pinkBlob { - position: relative; - width: 40%; - bottom: 0px; - } - - .section1Blobs { - position: relative; - bottom: 900px; - } - - /* Section 2 */ - .officeMapSVG { - width: 50%; - height: auto; - } - - /* Section 3 */ - - .section3 p { - font-size: 150%; - line-height: 150%; - } - - .section3 { - height: 3000px; - } - .summerstudent1picture { - width: 20%; - } - - .greenBlob { - width: 50%; - height: auto; - position: relative; - right: 300px; - bottom: 2500px; - } - - /* Handbook */ - .whyWorkAtVariant { - height: auto; - } - - .mostImportantForYou, - .handbookRef { - font-size: 150%; - line-height: 150%; - } - - .handbookGrid button { - font-size: 150%; - } - - .readMoreArrow { - display: none; - } - - .EvenPicture { - width: 50%; - } +.sectionLightPeach, +.sectionLightPeach button, +.sectionLightPeach a { + background-color: var(--color-secondary3__tint4); + color: var(--color-standard__black); } -@media (min-width: 2700px) { - .imageBlob1 { - position: relative; - bottom: 0px; - } - - .pinkBlob { - position: relative; - bottom: 400px; - } +.sectionLightPeach a:visited { + color: var(--color-primary__shade1); +} - .section1Blobs { - bottom: 1300px; - } +.sectionDarkTeal, +.sectionDarkTeal button, +.sectionDarkTeal a { + background-color: var(--color-secondary2__shade3); + color: var(--color-standard__white); } -@media (max-width: 1450px) { - .ApplyAsDeveloperDiv, - .ApplyAsDesignerDiv { - position: static; - } +.sectionDarkTeal a:visited { + color: var(--color-secondary2); } -@media (max-width: 1110px) { - .handbook { - display: block; - } - .readMoreArrow { - display: none; - } +.sectionLightBeige, +.sectionLightBeige button, +.sectionLightBeige a { + background-color: var(--color-secondary4__tint2); + color: var(--color-standard__black); } -@media (max-width: 900px) and (min-width: 720px) { - .EvenPicture { - width: 35%; - } +.sectionDarkPink, +.sectionDarkPink button, +.sectionDarkPink a { + background-color: var(--color-primary__shade2); + color: var(--color-standard__white); } diff --git a/src/summersplash2022/index.tsx b/src/summersplash2022/index.tsx index 9f2c2e5fe..b563e0867 100644 --- a/src/summersplash2022/index.tsx +++ b/src/summersplash2022/index.tsx @@ -30,16 +30,6 @@ const Summersplash2022 = () => { key="og:image" /> - - {/* -
- - sommerjobb - - - nyutdannet - -
*/} <> diff --git a/src/summersplash2022/landingpage.module.css b/src/summersplash2022/landingpage.module.css deleted file mode 100644 index 7299651e1..000000000 --- a/src/summersplash2022/landingpage.module.css +++ /dev/null @@ -1,30 +0,0 @@ -.infoBlock { - display: flex; - gap: 2rem; -} - -.infoBlock__text, -.infoBlock__link { - color: white; - text-decoration-color: white; -} - -.infoBlock__blob { - --info-block__blob-width: 60%; - min-width: var(--info-block__blob-width); -} - -@media (max-width: 650px) { - .infoBlock { - flex-direction: column; - align-items: center; - } - - .infoBlock__blob { - --info-block__blob-width: 100%; - } - - .infoBlock__title { - margin-left: 6rem; - } -} diff --git a/src/summersplash2022/nyutdannet/img/MountainImg.png b/src/summersplash2022/nyutdannet/img/MountainImg.png deleted file mode 100644 index 81bb7d2e2..000000000 Binary files a/src/summersplash2022/nyutdannet/img/MountainImg.png and /dev/null differ diff --git a/src/summersplash2022/nyutdannet/img/graduate norway map.svg b/src/summersplash2022/nyutdannet/img/graduate norway map.svg deleted file mode 100644 index 313c56077..000000000 --- a/src/summersplash2022/nyutdannet/img/graduate norway map.svg +++ /dev/null @@ -1,128 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/summersplash2022/nyutdannet/img/greenBlob.tsx b/src/summersplash2022/nyutdannet/img/greenBlob.tsx deleted file mode 100644 index 1968dcb8a..000000000 --- a/src/summersplash2022/nyutdannet/img/greenBlob.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import style from 'src/summersplash2022/index.module.css'; -const GreenBlob = () => { - return ( - - - - ); -}; - -export default GreenBlob; diff --git a/src/summersplash2022/nyutdannet/img/lesMerPilHvit.tsx b/src/summersplash2022/nyutdannet/img/lesMerPilHvit.tsx deleted file mode 100644 index f2a5974af..000000000 --- a/src/summersplash2022/nyutdannet/img/lesMerPilHvit.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -const ReadMoreArrowWhite = () => { - return ( - - - - - - ); -}; - -export default ReadMoreArrowWhite; diff --git a/src/summersplash2022/nyutdannet/img/pinkBlob.tsx b/src/summersplash2022/nyutdannet/img/pinkBlob.tsx deleted file mode 100644 index 523e2ace1..000000000 --- a/src/summersplash2022/nyutdannet/img/pinkBlob.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -const PinkBlob = () => { - return ( - - - - ); -}; - -export default PinkBlob; diff --git a/src/summersplash2022/nyutdannet/img/section1Blob.tsx b/src/summersplash2022/nyutdannet/img/section1Blob.tsx deleted file mode 100644 index 8b3cca71b..000000000 --- a/src/summersplash2022/nyutdannet/img/section1Blob.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -const Section1Blob = () => { - return ( - - - - ); -}; - -export default Section1Blob; diff --git a/src/summersplash2022/nyutdannet/img/section7Blob.tsx b/src/summersplash2022/nyutdannet/img/section7Blob.tsx deleted file mode 100644 index 8c88f7ba1..000000000 --- a/src/summersplash2022/nyutdannet/img/section7Blob.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -const Section7Blob = () => { - return ( - - - - ); -}; - -export default Section7Blob; diff --git a/src/summersplash2022/nyutdannet/img/sokSomDesigner.tsx b/src/summersplash2022/nyutdannet/img/sokSomDesigner.tsx deleted file mode 100644 index abf6bcd50..000000000 --- a/src/summersplash2022/nyutdannet/img/sokSomDesigner.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -const ApplyAsDesigner = () => { - return ( - - - - - ); -}; - -export default ApplyAsDesigner; diff --git a/src/summersplash2022/nyutdannet/img/sokSomUtvikler.tsx b/src/summersplash2022/nyutdannet/img/sokSomUtvikler.tsx deleted file mode 100644 index f016fac5d..000000000 --- a/src/summersplash2022/nyutdannet/img/sokSomUtvikler.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; - -const ApplyAsDeveloper = () => { - return ( - - - - - ); -}; - -export default ApplyAsDeveloper; diff --git a/src/summersplash2022/nyutdannet/img/tidslinje.tsx b/src/summersplash2022/nyutdannet/img/tidslinje.tsx deleted file mode 100644 index c65c2517f..000000000 --- a/src/summersplash2022/nyutdannet/img/tidslinje.tsx +++ /dev/null @@ -1,184 +0,0 @@ -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -const TimeLine2 = () => { - return ( - - - {' '} - August - Startskudd Alle nyutdannede samles til en oppstartsuke med - faglig og sosialt innhold. Oktober - Designverktøy/Rammeverk Utviklerne - jobber med HTML, CSS og JS, mens designerene går gjennom de vanligste - designverktøyene, som Figma og Illustrator. November - Tverrfaglig - samarbeid Samling med fokus på hvordan designere og utviklere best kan - samarbeide. Februar - Consulting for varianter Samling med fokus på - konsulentrollen og konsulentferdigheter. Mars - Designsprint/Sky - Designerne jobber med variants designsprint, og utviklerne jobber med - skyløsninger og utfordringer knyttet til dette. Mars - Designsprint/Sky - Designerne jobber med variants designsprint, og utviklerne jobber med - skyløsninger og utfordringer knyttet til dette. Mai - Konsulentøkonomi - De nyutdannede introduseres til konsulentøkonomi og økonomi i Variant. - Dyktig(ere) konsulent - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default TimeLine2; diff --git a/src/summersplash2022/nyutdannet/nyutdannet.module.css b/src/summersplash2022/nyutdannet/nyutdannet.module.css index bdffe3254..381429604 100644 --- a/src/summersplash2022/nyutdannet/nyutdannet.module.css +++ b/src/summersplash2022/nyutdannet/nyutdannet.module.css @@ -1,32 +1,3 @@ -/* Sections styling */ -.section2, -.section4, -.section5, -.section6, -.section7 { - padding: 10%; - padding-top: 5%; - margin-bottom: 0%; - scroll-snap-align: start; -} - -/* SnapScroll */ -.scrollContainer { - width: 100%; - height: 100%; - position: relative; - overflow-x: hidden; - z-index: 0; - max-height: 100vh; - overflow-y: scroll; - scroll-snap-type: y proximity; - scroll-behavior: smooth; -} - -:global(.body-hidden) .scrollContainer { - overflow-y: hidden; -} - /* global var */ :root { /* Heading */ @@ -53,760 +24,3 @@ --MobileParagraph-font-size: 16px; --MobileParagraph--line-height: 23px; } - -p { - font-family: var(--graphik-font-family); - font-style: var(--paragraph-font-style); - font-size: var(--paragraph-font-size); - line-height: var(--paragraph-line-height); - width: 100%; -} - -/* Headings */ -.heading { - font-family: var(--recoleta-font-family); - font-style: var(--heading-font-style); - font-weight: var(--heading-font-weight); - font-size: var(--heading-font-size); - line-height: var(--headig-line-height); - margin-bottom: 2%; -} -.calculator_radio-button-wrapper { - border: none; -} - -.bigHeading { - font-family: 'Recoleta'; - font-style: normal; - font-weight: 400; - font-size: 62px; - line-height: 84px; - width: 70%; - margin-bottom: 5%; -} - -/* Section1 */ -/* Section1 fonts */ - -.section1 { - background-color: #1a1837; - color: white; - scroll-snap-align: start; - padding-left: 10%; - padding-right: 10%; - height: 1200px; -} - -.header { - height: 80px; - margin-bottom: 5%; -} - -.section1 a { - color: white; -} - -.sommerjobbHeading { - width: auto; -} - -/* Section1 Paragraph */ -.section1 p { - font-family: var(--graphik-font-family); - font-style: var(--paragraph-font-style); - font-size: var(--paragraph-font-size); - line-height: var(--paragraph-line-height); -} - -.applyButtonPink a, -.applyButtonBlue a { - font-family: 'Recoleta'; - font-style: normal; - font-weight: 400; - font-size: 36px; - line-height: 50px; - padding: 1%; - text-decoration: none; -} - -.applyButtonPink a { - background-color: #f076a6; - color: #333333; -} - -.applyButtonBlue a { - background-color: #68e9dd; - color: #333333; -} - -.applyButtonPink { - margin-bottom: 5%; -} - -/* Section 1 image*/ -.imageBlob1 { - position: relative; - left: 60%; - width: 40%; - bottom: 410px; - z-index: 1; -} - -.section1BlobSVG { - position: relative; - bottom: 400px; - left: 20%; - z-index: 0; - width: 40%; - height: auto; -} - -.moreInfoDiv { - text-align: center; - position: relative; - bottom: 400px; -} - -/* Section 2 */ -.section2 { - height: auto; - background-color: '#F4F1E7'; -} - -.section2Flex { - display: flex; - flex-direction: row; -} - -.section2Text { - width: 67%; -} - -.officeMap2 { - width: 100%; -} - -/* Section 3 */ - -.readMoreArrowWhite { - width: 200%; - position: relative; - top: 200px; - right: 90%; -} - -.arrowDiv { - width: 100%; -} - -.handbookRef, -.handbookRef:visited { - color: white; -} - -/* Section 4 */ - -.section4 { - padding-top: 10%; - height: 1200px; -} - -.section4 p { - position: relative; - z-index: 2; -} - -.wrapper { - width: 80%; - margin-bottom: 10%; - margin-right: 2%; - position: relative; - z-index: 1; -} -.wrapper - [class*='calculator-controls'] - [class*='form-row'] - div - [class*='radio-button-wrapper'] { - border: none; -} - -.pinkBlobSalarySVG { - position: relative; - z-index: 0; - bottom: 500px; - right: 100px; -} - -.section4Flex { - display: flex; - flex-direction: row; - justify-content: center; - gap: 10%; -} - -.section4Text { - width: 48%; -} - -/* Section 5*/ -.section5 { - background-color: #8b0f40; - color: white; -} - -.section5 p { - font-family: var(--graphik-font-family); - font-style: var(--paragraph-font-style); - font-weight: 400; - font-size: 20px; - line-height: 32px; - - width: 50%; - margin-top: 2%; -} - -.graphicContainer { - position: relative; - bottom: 200px; - height: 1500px; - pointer-events: none; -} - -.section5Picture { - width: 40%; - z-index: 0; - position: relative; - right: 100px; - bottom: 450px; -} - -.section5Blob { - width: 70%; -} - -.section5PictureDiv { - position: relative; - bottom: 1270px; - left: 60%; -} - -.timeLine2 { - width: 100%; - z-index: 3; -} - -/* Section 6 */ -.flexTimeline { - display: flex; - align-items: flex-start; - gap: 2rem; -} - -.section6Div { - width: 48%; - height: 1200px; - z-index: 1; -} - -.section6 h3 { - position: relative; - z-index: 1; -} - -.section6 p { - font-family: var(--graphik-font-family); - font-style: var(--paragraph-font-style); - font-size: var(--paragraph-font-size); - line-height: var(--paragraph-line-height); - width: 100%; -} - -.section6 p:nth-child(1), -.section6 p:nth-child(2), -.section6 p:nth-child(3) { - position: relative; - width: 100%; - z-index: 1; -} - -.section6 p:nth-last-child(1) { - width: 600px; -} - -.section6Blob { - position: relative; - z-index: -2; - right: 45%; - transform: scale(0.5); - bottom: 33%; -} - -/* Section 7 */ -.section7 { - background-color: #fff3f2; - color: #333; - height: auto; -} - -.imagePositionMobile { - display: none; -} - -.section7 p { - width: 40%; -} - -.section7 a { - color: #333; -} - -.section7Blob { - z-index: 0; - position: relative; - bottom: 1150px; - left: 45%; -} - -.contactMail { - color: white; -} - -.section7Blob { - position: absolute; - top: 8000px; -} - -.ApplyDiv { - margin-top: 5%; -} - -@media (min-width: 1919px) { - .moreInfoDiv { - bottom: 300px; - } - - .section2 { - height: 1100px; - } - - /* Section 5 */ - .section5 p { - width: 40%; - } - - .section7Blob { - top: 8500px; - } -} -@media (max-width: 2500px) { - .imageBlob1 { - position: relative; - top: -300px; - } - - .section1BlobSVG { - position: relative; - top: -200px; - } - - .section1Blobs { - position: static; - bottom: 300px; - z-index: 1; - } -} - -@media (max-width: 1400px) { - /* Section 6 */ - .readMoreArrowWhite { - width: 100%; - } - - .arrowDiv { - width: 100%; - } - - .timeLine2 { - display: none; - } - - .timeLine2Mobile { - position: relative; - right: 370px; - top: 250px; - } -} - -@media (max-width: 1120px) { - /* Section 6 */ - .flexTimeline { - width: auto; - display: block; - } - - .readMoreArrowWhite { - display: none; - } - - .section5PictureDiv { - bottom: 1100px; - } - - .section6Div { - height: 1000px; - width: auto; - } - - .section6 { - height: auto; - } - - .section6 p:nth-child(1), - .section6 p:nth-child(2), - .section6 p:nth-child(3) { - width: 100%; - } - - .timeLineBlack { - margin-top: 30rem; - } - - .section6Blob { - bottom: 300px; - } -} - -@media (max-width: 1134px) { - /* Breakpoint for Lønnskalkulator*/ - .section4Flex { - display: block; - } - .section4Text { - width: auto; - } - - .wrapper { - width: 100%; - } - - .section1Blob { - display: none; - } - - /* Breakpoint for office map*/ - .section2Flex { - display: block; - } - - .section2Text { - width: auto; - } -} - -@media (max-width: 1080px) { - .moreInfoDiv { - bottom: 100px; - } -} - -@media (max-width: 900px) { - .bigHeading { - width: 100%; - font-family: 'Recoleta'; - font-style: normal; - font-weight: 400; - font-size: 38px; - line-height: 52px; - } - - .applyButtonPink a, - .applyButtonBlue a { - font-family: 'Recoleta'; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 50px; - padding: 3%; - } - - .section1 { - height: 900px; - } - - .section1Blobs { - position: static; - } - - .imageBlob1 { - margin-top: 5%; - position: static; - } - - .section1BlobSVG { - display: none; - } - - .readMoreArrowWhite { - display: none; - } -} - -@media (min-width: 1400px) { - .timeLine2Mobile { - display: none; - } -} - -@media (min-width: 2050px) { - .heading { - font-size: 300%; - } - - .moreInfoDiv { - display: none; - } - - .section1 p { - font-size: 150%; - line-height: 150%; - } - - .section1 { - height: 1400px; - } - - .imageBlob1 { - position: relative; - bottom: 1000px; - } - - .section1BlobSVG { - bottom: 1000px; - } - - /* Section 2 */ - .section2 { - height: auto; - } - - .section2 p { - font-size: 150%; - line-height: 150%; - } - - .officeMap2 { - width: 50%; - height: auto; - } - - /* Section 4 */ - .section4 { - height: auto; - } - - .section4 p { - font-size: 150%; - line-height: 150%; - } - - .readMoreArrowWhite { - display: none; - } - - .section4Flex { - justify-content: left; - } - - /* Section 5 */ - .section5 { - height: 5000px; - } - - .section5 p { - font-size: 150%; - line-height: 150%; - } - - .timeLine2 { - width: 100%; - height: auto; - } - - .section5PictureDiv { - display: none; - } - - /* Section 6 */ - .section6 p { - font-size: 150%; - line-height: 150%; - } - - .timeLineBlack { - width: auto; - height: auto; - } - - .timeLineWhite { - width: 50%; - height: auto; - } - - .section6 p:nth-last-child(1) { - width: 100%; - } - - .section6 h4 { - font-size: 150%; - line-height: 150%; - } - - .section7 p { - font-size: 150%; - line-height: 150%; - } - - .ApplyDiv a { - font-size: 150%; - } -} - -@media (min-width: 3500px) { - .section5Picture { - left: 400px; - bottom: 1300px; - bottom: 2800px; - } - - .section5Blob { - position: relative; - left: 200px; - bottom: 800px; - width: 70%; - height: auto; - } - - .section5PictureDiv { - display: block; - } -} - -/* Mobile */ -@media (max-width: 500px) { - /* Mobile Heading */ - .heading { - font-family: var(--MobileHeading-font-family); - font-style: var(--MobileHeadingfont-style); - font-weight: var(--MobileHeadingfont-weight); - font-size: var(--MobileHeadingfont-size); - line-height: var(--MobileHeadingline-height); - margin-bottom: 10%; - } - - p, - .section1 p, - .section5 p, - .section6 p { - font-size: var(--Mobileparagraph-font-size); - line-height: var(--MobileParagraph--line-height); - } - - /* Section 1*/ - - .section1 { - height: 1200px; - } - - .sommerjobbHeading { - width: 100%; - } - - .imageBlob1 { - position: relative; - top: 300px; - left: 40px; - width: 100%; - height: auto; - } - - .section1BlobSVG { - display: none; - } - - .section1Blob { - display: block; - position: relative; - top: 700px; - right: 200px; - } - - .fastjobbheading { - width: fit-content; - } - - .pinkBlobSalarySVG { - width: 800px; - right: 300px; - bottom: 400px; - } - - /* Section 5 */ - .section5 p { - width: auto; - } - - .section5PictureDiv { - bottom: 1050px; - left: 120px; - } - - .section5Picture { - width: 80%; - bottom: 400px; - } - - .section5Blob { - width: 300px; - } - - /* Section 6 */ - .section6 { - height: 1900px; - } - - .section6 p:nth-child(1), - .section6 p:nth-child(2), - .section6 p:nth-child(3) { - width: 100%; - } - - .timeLineBlack { - margin-top: 7rem; - } - - .section6Blob { - bottom: 300px; - } - - /* Section 7 */ - .section7 p { - width: 100%; - } - - .imagePositionMobile { - display: block; - } - - .imagePositionDesktop { - display: none; - } - - .section7Blob { - width: 100%; - height: auto; - top: 9050px; - z-index: 0; - left: 0px; - } -} diff --git a/src/summersplash2022/nyutdannet/nyutdannet.tsx b/src/summersplash2022/nyutdannet/nyutdannet.tsx index ef6be1181..e3fe5f909 100644 --- a/src/summersplash2022/nyutdannet/nyutdannet.tsx +++ b/src/summersplash2022/nyutdannet/nyutdannet.tsx @@ -1,13 +1,15 @@ -import LandingPage from './sections/forside'; -import AfterApplying, { ApplyType } from './sections/hvaSkjerEtterSonaadsfristen'; -import WhoAreWeSeeking from './sections/hvemSokerVi'; -import FirstYear from './sections/hvordanSerFørsteÅretUt'; -import WhyVariant from './sections/hvorforAkkurattVariant'; -import Payment from './sections/lonn'; -import Apply from './sections/søkJobb'; -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; +import LandingPage from '../sections/forside'; +import AfterApplying from '../sections/hvaSkjerEtterSonaadsfristen'; +import WhoAreWeSeeking from '../sections/hvemSokerVi'; +import FirstYear from '../sections/hvordanSerFørsteÅretUt'; +import WhyVariant from '../sections/hvorforAkkurattVariant'; +import Payment from '../sections/lonn'; +import Apply from '../sections/søkJobb'; import Head from 'next/head'; import favicon from '@variant/profile/lib/logo/favicon.png'; +import { HandbookPage } from '../utils/handBookPages'; +import style from 'src/summersplash2022/index.module.css'; +import { ApplyType } from '../utils/utils'; const Nyutdannet = () => { return ( @@ -38,13 +40,28 @@ const Nyutdannet = () => {
- - - + + + - - + + +
); diff --git a/src/summersplash2022/nyutdannet/sections/forside.tsx b/src/summersplash2022/nyutdannet/sections/forside.tsx deleted file mode 100644 index 8c77f5f85..000000000 --- a/src/summersplash2022/nyutdannet/sections/forside.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import style from '../nyutdannet.module.css'; -import Section1Blob from '../img/section1Blob'; -import Header from 'src/summersplash2022/components/header/header'; -import MoreInfo from 'src/summersplash2022/img/merInfo'; - -const LandingPage = () => { - const blobSection1 = require('src/summersplash2022/img/section1Blob.png'); - - return ( - <> -
-
-
-
- -

- Vi ser etter 17 nyutdannede varianter i 2024! -

- -
-
-

Søk senest 1. oktober

-

- Søk fast jobb -

-
-
-

Fortsatt et par år igjen med studier?

-

- Jeg vil ha sommerjobb -

-
-
- To fra Variant - -
-
- -
-
- - ); -}; - -export default LandingPage; diff --git a/src/summersplash2022/nyutdannet/sections/hvaSkjerEtterSonaadsfristen.tsx b/src/summersplash2022/nyutdannet/sections/hvaSkjerEtterSonaadsfristen.tsx deleted file mode 100644 index 624f72022..000000000 --- a/src/summersplash2022/nyutdannet/sections/hvaSkjerEtterSonaadsfristen.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import style from 'src/summersplash2022/index.module.css'; -import style2 from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -import DarkRedBlob from '../img/mørkerødBlob'; -import Section6Blob from '../img/section6Blob'; - -export enum ApplyType { - GRADUATE, - SUMMER, -} - -const AfterApplying = (props: { red: boolean; applyType: ApplyType }) => { - const Even = require('src/summersplash2022/img/Even.png'); - let TimeLine; - if (props.applyType === ApplyType.GRADUATE) { - TimeLine = require('../img/graduate timeline.svg'); - } else { - TimeLine = require('../../img/timeline.svg'); - } - - if (props.red) { - return ( -
-

Hva skjer etter søknadsfristen?

-
-
-

- Vi liker ikke tradisjonelle intervjuer. De plasserer søker i en - unaturlig situasjon, og man blir ikke godt kjent med hverandre. - Etter at vi har vurdert alle søknadene inviterer vi utvalgte - kandidater til en kaffeprat. Dette er en uformell samtale hvor - målet er å bli bedre kjent med hverandre, med fokus på både det - faglige og det personlige. Og nei – du er selvsagt ikke nødt til å - drikke kaffe. -

-

- Dersom du får jobbtilbud og takker ja, inkluderes du straks i - Variant. Du får tilgang til vår Slack, og mulighet til å delta på - faglige og sosiale arrangementer. Dette inkluderer blant annet - spill- og fagkvelder, nyttårskalas og variantdager, som er fine - muligheter til å bli bedre kjent før sommerjobben starter i juni. -

-
- Even -
-
- -
-
-
-
- Søknadsfrist: 1.oktober, Kaffeprat: 4.-5.oktober, tilbud om sommerjobb: 6.oktober - sosiale og faglige arrangementer: november-juni, første arbeidsperiode: 10.juni - 5.juli (4 uker), ferie - 8.juli - 26 juli (3 uker), andre arbeidsperiode : 29.juli - 9.august (2 uker) -
- -
-

Søknadstips:

-

- Vi setter pris på en søknad med CV, søknadsbrev, - karakterutskrift og gjerne også portifolio og/eller GitHub profil. Det viktigste for oss er å få et helhetlig - bilde. Både av deg som person, din eksisterende kompetanse og - dine ambisjoner. Så hvem er du og hvorfor søker du sommerjobb i - Variant? Vi trenger mennesker som bryr seg om å skape en bedre - hverdag. Er det deg? -

-
-
-
-
- ); - } else { - return ( -
-

Hva skjer etter søknadsfristen?

-
-
-

- Vi liker ikke tradisjonelle intervjuer. De plasserer søker i en - unaturlig situasjon, og man blir ikke godt kjent med hverandre. - Etter at vi har vurdert alle søknadene inviterer vi utvalgte - kandidater til en kaffeprat. Dette er en uformell samtale hvor - målet er å bli bedre kjent med hverandre, med fokus på både det - faglige og det personlige. Og nei – du er selvsagt ikke nødt til å - drikke kaffe. -

- -

- Noen dager etter kaffepraten vil aktuelle kandidater inviteres til - en sammarbeidscase hvor man vil jobbe sammen med 2 andre - varianter. Man vil få oppgaven på forhånd, men man skal ikke gjøre - noen store forbredelser. -

-

- Dersom du får jobbtilbud og takker ja, inkluderes du straks i - Variant. Du får tilgang til vår Slack, og mulighet til å delta på - faglige og sosiale arrangementer. Dette inkluderer blant annet - spill- og fagkvelder, nyttårskalas og variantdager, som er fine - muligheter til å bli bedre kjent før man starter. -

-
- -
-
-
-
- tidslinje -
- -
-

Søknadstips:

-

- Vi setter pris på en søknad med CV, søknadsbrev og - karakterutskrift. Det viktigste for oss er å få et helhetlig - bilde. Både av deg som person, din eksisterende kompetanse og - dine ambisjoner. Så hvem er du og hvorfor søker du sommerjobb i - Variant? Vi trenger mennesker som bryr seg om å skape en bedre - hverdag. Er det deg? -

-
-
-
-
- ); - } -}; - -export default AfterApplying; diff --git a/src/summersplash2022/nyutdannet/sections/hvemSokerVi.tsx b/src/summersplash2022/nyutdannet/sections/hvemSokerVi.tsx deleted file mode 100644 index b7787a44b..000000000 --- a/src/summersplash2022/nyutdannet/sections/hvemSokerVi.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { useEffect, useState } from 'react'; -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -const WhoAreWeSeeking = () => { - const [isDesktop, setIsDesktop] = useState(true); - const graduateNorwayMap = require('../img/graduate norway map.svg') - - const handleResize = () => { - if (window.matchMedia('(max-width: 500px)').matches) { - setIsDesktop(false); - } else { - setIsDesktop(true); - } - }; - - useEffect(() => { - if (window) { - if (window.matchMedia('(max-width: 500px)').matches) { - setIsDesktop(false); - } - window.addEventListener('resize', handleResize); - } - }, []); - return ( -
-

Hvem søker vi?

-
-
-

- Vi søker 17 nyutdannede designere og utviklere som engasjerer og - motiverer, med oppstart 1. august 2024. Stillingene er fordelt på - våre kontorer i Trondheim, Oslo og Bergen. Det er ikke viktig hvilke - verktøy eller språk du bruker. Det er derimot viktig at du bryr deg. - Bryr deg om koden du skriver, bryr deg om brukeren du lager noe for, - og bryr deg om kunden du leverer til. -

- {!isDesktop ? Bergen: 2 utviklere, 1 designer, Trondheim : 4 utviklere - 4 designere, Oslo : 3 utviklere 3 designere : <>} - -

- Gjennom både strukturert og impulsiv kunnskapsutveksling lærer vi av - hverandre og de vi jobber med for å bli flinkere, modigere og - rausere. Vi elsker utfordringer hvor design- og teknologikompetanse - finner sammen og tar plass i kundens kultur. Her oppdager vi stadig - at en helhetlig tilnærming til utvikling og design skaper entusiasme - og tilfører ekstra verdi. Variant er et selskap av og for de - ansatte, der læreglede står i sentrum. Deler du også denne - filosofien? -

-
- {isDesktop ? Bergen: 2 utviklere, 1 designer, Trondheim : 4 utviklere - 4 designere, Oslo : 3 utviklere 3 designere : <>} -
-
- ); -}; - -export default WhoAreWeSeeking; diff --git "a/src/summersplash2022/nyutdannet/sections/hvordanSerF\303\270rste\303\205retUt.tsx" "b/src/summersplash2022/nyutdannet/sections/hvordanSerF\303\270rste\303\205retUt.tsx" deleted file mode 100644 index 9a2ce8f42..000000000 --- "a/src/summersplash2022/nyutdannet/sections/hvordanSerF\303\270rste\303\205retUt.tsx" +++ /dev/null @@ -1,59 +0,0 @@ -import style from '../nyutdannet.module.css'; -import TimeLine2 from '../img/tidslinje'; -import Section5Blob from '../img/section5Blob'; -import TimeLine2Mobile from 'src/summersplash2022/img/tidslinje2Mobil'; -import { useEffect, useState } from 'react'; -const FirstYear = () => { - const mountain = require('src/summersplash2022/nyutdannet/img/MountainImg.png'); - - const [isDesktop, setIsDesktop] = useState(true); - - const handleResize = () => { - if (window.matchMedia('(max-width: 1400px)').matches) { - setIsDesktop(false); - } else { - setIsDesktop(true); - } - }; - - useEffect(() => { - if (window) { - if (window.matchMedia('(max-width: 1400px)').matches) { - setIsDesktop(false); - } - window.addEventListener('resize', handleResize); - } - }, []); - - return ( - <> -
-

Hvordan ser første året ut?

-

- For å bidra til personlig og faglig utvikling av nyutdannede - gjennomfører vi oppstartsprogrammet{' '} - - variant:skudd - - . Programmet gjennomføres i løpet av det første året den nyutdannede - jobber i Variant.{' '} -

-
- {isDesktop ? : } -
-
- -
- Mountaint trip in Oppdal -
-
-
- - ); -}; - -export default FirstYear; diff --git a/src/summersplash2022/nyutdannet/sections/hvorforAkkurattVariant.tsx b/src/summersplash2022/nyutdannet/sections/hvorforAkkurattVariant.tsx deleted file mode 100644 index 4f5e29348..000000000 --- a/src/summersplash2022/nyutdannet/sections/hvorforAkkurattVariant.tsx +++ /dev/null @@ -1,162 +0,0 @@ -import { useEffect, useState } from 'react'; -import style from 'src/summersplash2022/index.module.css'; -import style2 from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -import ReadMoreArrowWhite from '../img/lesMerPilHvit'; -import HandBooKPagesJob from '../utils/handBookPagesJob'; - -const WhyVariant = () => { - const [whichButtonSelected, setWhichButtonSelected] = useState(''); - const [isMobile, setIsMobile] = useState(false); - - const handleResize = () => { - setIsMobile(window.matchMedia('(max-width: 900px)').matches); - }; - - const handleOnClick = (buttonValue: string) => { - if (window.matchMedia('(max-width: 900px)').matches) { - } - setWhichButtonSelected(buttonValue); - }; - - useEffect(() => { - setIsMobile(window.matchMedia('(max-width: 900px)').matches); - window.addEventListener('resize', handleResize); - if ( - window.matchMedia('(min-width: 2000px)').matches && - whichButtonSelected === '' - ) { - setWhichButtonSelected('Formal og verdier'); - } - }, []); - - return ( -
-
-
-

Hvorfor akkurat Variant?

-

- Variant er en variant av et konsulentselskap som er raust, åpent og - læreglad. Disse verdiene ligger til grunn for hvordan vi møter - hverandre, våre kunder og alle andre. I håndboken vår kan du lese om - hvordan ting gjøres i Variant, hva vi prøver å oppnå og hvorfor vi - tenker som vi gjør. Under kan du sjekke ut noen utvalgte temaer. -

- -
- - - - -
-
-

- Hva er viktigst for deg? -

- - Sjekk ut hele håndboka vår her - -
-
-
- {whichButtonSelected ? ( - - ) : ( -
- -
- )} -
-
-

- Hva er viktigst for deg? -

- - Sjekk ut hele håndboka vår her - -
-
-
- ); -}; - -export default WhyVariant; diff --git "a/src/summersplash2022/nyutdannet/sections/s\303\270kJobb.tsx" "b/src/summersplash2022/nyutdannet/sections/s\303\270kJobb.tsx" deleted file mode 100644 index 26bf4665b..000000000 --- "a/src/summersplash2022/nyutdannet/sections/s\303\270kJobb.tsx" +++ /dev/null @@ -1,55 +0,0 @@ -import style from 'src/summersplash2022/index.module.css'; -import style2 from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; -const Apply = () => { - const Marius = require('src/summersplash2022/img/Marius.png'); - - return ( -
-

Søk fast jobb

-

- Vi håper du søker, og vi ser frem til å bli bedre kjent med deg. Har du - spørsmål om fastjobb eller Variant? Ta gjerne kontakt med meg. -

-

- Marius Krakeli, Chief Recruitment Officer

-
-
-

- 41637572 -

-
-
-

|

-
-

- - mk@variant.no - -

-
-
- Bilde av Marius -
-
-
-

- - Søk som designer - -

-
-
-

- - Søk som utvikler - -

-
-
-
- Bilde av Marius -
-
- ); -}; - -export default Apply; diff --git a/src/summersplash2022/nyutdannet/utils/handBookPagesJob.tsx b/src/summersplash2022/nyutdannet/utils/handBookPagesJob.tsx deleted file mode 100644 index 19c171398..000000000 --- a/src/summersplash2022/nyutdannet/utils/handBookPagesJob.tsx +++ /dev/null @@ -1,235 +0,0 @@ -import { WhichButtonPressed } from 'src/summersplash2022/utils/utils'; -import style from 'src/summersplash2022/index.module.css'; - -const HandBooKPagesJob = ({ selectedButton }: WhichButtonPressed) => { - if (selectedButton === 'Formal og verdier') { - return ( -
-

- Formål og verdier -

-

- Så, hvorfor Variant? Hvorfor er vi egentlig til? Vårt formål er å - utvikle samfunnet vi lever i. Flinke personer som tenker nye tanker, - og så lager de riktige løsningene. -

-

- Våre tre grunnverdier er: -

-

- Raushet - Dette vises i hvordan vi møter hverandre, - våre kunder og folk i nærmiljøet. -

-

- Åpenhet - Hva i all verden skal et selskap tjene på å - holde informasjon hemmelig for sine ansatte? -

-

- Læreglede - Vi er folk som ønsker å lære og lære - bort. Vi skal ha ydmykhet nok til å skjønne at vi kan lære noe fra - alle, og troen på at alle kan lære noe fra oss. -

-
- ); - return ( -
-

Tillit og ansvar

-

- Variant vil gi sine ansatte det beste, vi som jobber her forventes å - gi det samme. Vi gir full tillit til hverandre fordi vi tror at alle - er i stand til å gjøre riktige valg. Hva du trenger for å lære noe - nytt eller gjøre jobben din er opp til deg. Vi forventer bare at du - selv vurderer kostnadene opp mot vinningen og sparrer med andre når - det trengs. -

-

- Ha det morsomt - Et arbeidsliv består av maaaange - timer. Vi vil gjøre noe som gir mening og samtidig ha det morsomt. Det - spekuleres i om Variant eksisterer fordi det er hyggeligere å skape - noe sammen med mennesker man trives med. Det får vi nok ikke svaret - på, men inntil videre så kan du le ofte og gjøre gærne ting! -

-

- Vær stolt - Vi vil at du skal være stolt av det du - gjør. Er du ikke den stolte typen? Da vil vi gjerne at du har mot til - å endre på det. Du skal kunne være stolt av å være her, nettopp fordi - du har gjort så mye bra tidligere. Så rett deg opp i ryggen, og si at - du jobber i Variant. 🦄 -

-
- ); - } else if (selectedButton === 'Arbeidet') { - return ( -
-

- Arbeidet -

-

- Fleksitid - En arbeidsdag er på 7,5 timer. Hvordan - disse fordeles på en dag bestemmer du selv, gitt at ikke annet er - avtalt på prosjektet du jobber på. -

-

- Det kan også hende at du i noen perioder ønsker eller trenger å kunne - bruke mindre tid på jobb. Derfor har du hos oss muligheten til å senke - stillingsgraden i perioder. Med åpenhet mellom deg, ledere og kunden - om behovet og ønskene dine, vil vi sammen jobbe for å finne løsningen - alle trives med. -

-

- Kompetanseutvikling - For å være gode er det viktig - med faglig påfyll! Variant tilrettelegger for at alle ansatte skal - kunne utvikle seg, både faglig og personlig. Dette gjøres blant annet - gjennom{' '} - - Variantdager - - , Variant:{' '} - - skudd - {' '} - og{' '} - - tilrettelegging for deltagelse på konferanser. - -

-

- Verktøy - Skikkelig jobb krever skikkelige verktøy. - Du velger selv datamaskin og størrelse, farge og modell på den. Vi - stoler på at du velger det beste for at du skal kunne gjøre en best - mulig jobb. Det er ikke et gitt antall års brukstid på maskinene. Du - får en ny maskin når behovet oppstår, uavhengig av om det har gått ett - eller tre år. -

-

- Som konsulenter selger vi ekspertise og kunnskap, så invester gjerne i - bøker, kurs og annet læringsmateriale. Bare husk å sende regningen til - regnskap. Den betales med stor glede! 🤓 -

-
- ); - } else if (selectedButton === 'Det sosiale') { - return ( -
-

- Det sosiale -

-

- Variantdag - I tillegg til faglig påfyll er dette en - god mulighet til å ha det hyggelig sammen. -

-

- Donut - Annenhver uke blir du satt sammen med en - tilfeldig trekt kollega, og oppfordret til å bruke litt tid på å bli - bedre kjent. Gjerne over en kaffe eller en donut. -

-

- Månedlig frokost - - En gang i måneden møtes vi ute for å spise en digg frokost sammen. -

-

- Fester (Nyttårskalas, julebord, sommerfest) - - Selv om studenttilværelsen kanskje snart er over blir det fortsatt - mange muligheter for sene kvelder. Ta gjerne med en +1! -

-

- Utenlandstur - I september hvert år drar vi på - Varianttur. -

-

- Slackkanaler - - Har du noe du brenner for eller har lyst til å lære mer om? I Slack - har vi kanaler for alt fra musikk, planter og gaming til en kanal for - diskusjon av ølkalendere. Det er alltids mulig å lage flere også. -

-

- Sossis-fond - I tillegg til de faste sosiale - aktivitetene har vi et fond på 50 000 kr som brukes på andre sosiale - aktiviteter. Dette kan være aktiviteter som hytteleie i Sverige, - fjellturer, Rush trampolinepark, matlaging eller hva enn vi kommer på - kan være en god idé. -

-
- ); - } else if (selectedButton === 'Goder') { - return ( -
-

- Goder -

-

- God lønn - Dette sikrer den stabiliteten og friheten - vi ønsker å gi. Sjekk ut{' '} - - lønnskalkulatoren - {' '} - vår eller scroll lenger ned for å lese mer om lønn -

-

- Gadgets - Hvert år har du 10 000 pluss moms (dvs. - 12500 i praksis) til å kjøpe gadgets.{' '} - - Trykk her for å se hva andre har kjøpt - - . -

-

- Trening - - Variant dekker treningsutgifter opptil 500/mnd (dette kan være - medlemskap på senter, treningsutstyr eller noe annet - treningsrelatert). -

-

- Fri telefoni (innenfor rimelighetens grenser). -

-

- Bredbånd hjemme - Variant dekker bredbånd inntil 500 - kr/mnd.{' '} -

-

- Forsikring - Ut over vanlig yrkesskadeforsikringer - får du reiseforsikring for hele familien, gruppelivsforsikring, - behandlingsforsikring og dekning for annen ulykke enn yrkesskade. -

-

- Utvidede rettigheter til egenmelding og sykepenger. -

-
- ); - } else { - return <>; - } -}; -export default HandBooKPagesJob; diff --git a/src/summersplash2022/sections/forside.module.css b/src/summersplash2022/sections/forside.module.css new file mode 100644 index 000000000..ff2c051f3 --- /dev/null +++ b/src/summersplash2022/sections/forside.module.css @@ -0,0 +1,214 @@ +@import '~@variant/profile/lib/colors/index.module.css'; + +.section { + padding-top: 0; + display: flex; + flex-direction: column; + gap: 1rem; + position: relative; +} + +.togglePageDiv { + display: grid; + grid-template-columns: 1fr auto 1fr; + gap: 1rem; + height: 10rem; +} + +.togglePage { + border: 2px solid; + border-radius: 2rem; + display: flex; + width: max-content; + margin: auto; + grid-column: 2 / span 1; + grid-row: 1 / span 1; +} + +.togglePage a { + border-radius: 2rem; + padding: 0.5rem 1rem; + font-weight: 500; + text-decoration: none; +} + +.togglePage.togglePageBlue { + border-color: var(--color-secondary1); + color: var(--color-secondary1); +} + +.togglePage.togglePageBlue a { + color: var(--color-secondary1); +} + +.togglePage.togglePageLightBlue { + border-color: var(--color-secondary1__tint4); + color: var(--color-secondary1__tint4); +} + +.togglePage.togglePageLightBlue a { + color: var(--color-secondary1__tint4); +} + +.togglePage a.toggleActiveBlue { + background-color: var(--color-secondary1); + color: var(--color-standard__white); + font-weight: 600; +} + +.togglePage a.toggleActiveLightBlue { + background-color: var(--color-secondary1__tint4); + color: var(--color-standard__black); +} + +.graduateToggleArrow { + grid-column: 3 / span 1; + display: flex; + align-self: flex-end; +} + +.summerjobToggleArrow { + grid-column: 1 / span 1; + display: flex; + justify-self: flex-end; + margin-top: -2rem; + align-self: center; +} + +.textGradient { + background-size: 100% 100%; + background-clip: text; + transition: color 0.2s ease-in-out; + background-position-x: 60%; + -webkit-text-fill-color: transparent; +} + +.flex { + display: grid; + grid-template-columns: max-content 1fr; + grid-template-rows: auto auto; + gap: 2rem 0; + flex-grow: 1; +} + +.flex h1 { + grid-column: 1 / span 2; + grid-row: 1 / span 1; +} + +.applyDiv { + display: flex; + align-items: flex-end; + margin-bottom: 6rem; + grid-column: 1 / span 1; + grid-row: 2 / span 1; +} + +.imgDiv { + display: flex; + justify-content: flex-end; + align-items: flex-end; + flex-grow: 1; + margin-right: -8rem; + margin-bottom: -3rem; + grid-column: 2 / span 2; + grid-row: 1 / span 2; +} + +.imgWithBlob { + height: min-content; + max-width: 34rem; + width: 100%; + max-height: 75vh; +} + +.applyLink { + text-decoration: underline; + text-decoration-color: #ed6fa0; + text-underline-offset: 0.8rem; + font-size: 1.8rem; +} + +.moreInfoDiv { + position: absolute; + right: 50%; + bottom: 2rem; +} + +@media (max-width: 1900px) { + .imgWithBlob { + max-height: 50vh; + } +} + +@media (max-width: 1700px) { + .flex h1 { + grid-column: 1 / span 2; + } + + .imgDiv { + grid-column: 2 / span 2; + grid-row: 2 / span 1; + } +} + +@media (max-width: 1300px) { + .applyDiv { + margin-bottom: 0; + } + + .imgDiv { + margin-right: -2rem; + margin-bottom: 0rem; + } +} + +@media (max-width: 1000px) { + .imgDiv { + margin-bottom: 2rem; + } +} + +@media (max-width: 850px) { + .section { + gap: 3rem; + } + + .togglePageDiv { + height: 6rem; + } + + .flex { + gap: 0; + display: flex; + flex-direction: column; + gap: 2rem; + } + + .graduateToggleArrow, + .summerjobToggleArrow { + display: none; + } + + .applyDiv { + order: 3; + margin-bottom: 3rem; + } + + .imgDiv { + justify-content: center; + align-items: center; + margin: 0; + order: 2; + } + + .imgWithBlob { + height: min-content; + } +} + +@media (max-width: 400px), (max-height: 410px) { + .imgDiv { + display: none; + } +} diff --git a/src/summersplash2022/sections/forside.tsx b/src/summersplash2022/sections/forside.tsx new file mode 100644 index 000000000..0aa5cfe82 --- /dev/null +++ b/src/summersplash2022/sections/forside.tsx @@ -0,0 +1,76 @@ +import style from './forside.module.css'; +import Header from 'src/summersplash2022/components/header/header'; +import MoreInfo from 'src/summersplash2022/img/merInfo'; +import { ApplyType } from 'src/summersplash2022/utils/utils'; +import ArrowDown from 'src/summersplash2022/img/arrowDown'; +import GraduateToggleArrow from '../img/graduateToggleArrow'; +import SummerjobToggleArrow from 'src/summersplash2022/img/summerjobToggleArrow'; +import LandingPageImgWithBlob from 'src/summersplash2022/img/landingpageImgWithBlob'; + +const LandingPage = ({ + applyType, + className, +}: { + applyType: ApplyType; + className: string; +}) => { + const isApplyGraduate: boolean = applyType == ApplyType.GRADUATE; + + return ( + <> +
+
+
+
+ + Sommerjobb + + + Nyutdannet + +
+ {isApplyGraduate ? : } +
+
+

+ Vi ser etter + + {isApplyGraduate ? ' 17 nyutdannede ' : ' 23 sommervarianter '} + + i 2024! +

+
+ +
+
+ +
+
+ +
+ +
+
+ + ); +}; + +export default LandingPage; diff --git a/src/summersplash2022/sections/hvaSierSommerstudente.module.css b/src/summersplash2022/sections/hvaSierSommerstudente.module.css new file mode 100644 index 000000000..f60a0d9d1 --- /dev/null +++ b/src/summersplash2022/sections/hvaSierSommerstudente.module.css @@ -0,0 +1,165 @@ +.section { + position: relative; +} + +.summerstudent { + display: flex; + flex-direction: row; + z-index: 10; + width: 70%; + margin: 3rem 0; + margin-top: 0; +} + +.summerstudent:nth-of-type(even) { + flex-direction: row-reverse; + margin-left: 12rem; +} + +.summerstudent:last-of-type { + margin-bottom: 0; +} + +.img { + width: 288.35px; + height: 288.35px; + margin-top: auto; + margin-bottom: auto; +} + +.summerstudent:nth-of-type(odd) .img { + margin-right: 4rem; +} + +.summerstudent:nth-of-type(even) .img { + margin-left: 4rem; +} + +.quote, +.name { + position: relative; +} + +.quote { + font-family: var(--graphik-font-family); +} + +.name { + font-family: var(--recoleta-font-family); +} + +.summerstudent div { + display: flex; + flex-direction: column; + justify-content: center; +} + +.summerstudent, +.img, +.quote, +.name { + z-index: 10; +} + +.greenBlobTop { + right: -15rem; + width: 700px; + position: absolute; + top: 0rem; +} + +.greenBlobMiddle { + left: -14rem; + width: 740px; + position: absolute; + bottom: -16%; + transform: rotate(205deg); +} + +.greenBlobBottom { + position: absolute; + display: none; + transform: rotate(205deg); +} + +@media (max-width: 1700px) { + .summerstudent { + margin: 6rem 0; + } +} + +@media (max-width: 1500px) { + .summerstudent { + width: 100%; + } + + .summerstudent:nth-of-type(even) { + margin-left: 0; + } +} + +@media (max-width: 1300px) { + .greenBlobTop { + width: 70%; + right: -35%; + } + + .greenBlobMiddle { + left: -25rem; + } +} + +@media (max-width: 800px) { + .summerstudent, + .summerstudent:nth-of-type(even) { + display: flex; + flex-direction: column; + width: 100%; + margin: 3rem 0; + } + + .summerstudent:nth-of-type(even) .img, + .summerstudent:nth-of-type(odd) .img { + margin: 0 auto; + margin-bottom: 2rem; + } + + .greenBlobTop { + top: 7%; + } + + .greenBlobMiddle, + .greenBlobBottom { + width: 75%; + } + + .greenBlobMiddle { + left: -22%; + bottom: 28%; + } + + .greenBlobBottom { + display: block; + bottom: -10%; + top: auto; + right: -5rem; + } +} + +@media (max-width: 500px) { + .img { + width: 90%; + } + + .greenBlobTop { + right: -44%; + } + + .greenBlobMiddle { + left: -10rem; + } + + .greenBlobBottom { + right: -32%; + } +} diff --git a/src/summersplash2022/sections/hvaSierSommerstudentene.tsx b/src/summersplash2022/sections/hvaSierSommerstudentene.tsx new file mode 100644 index 000000000..488193be0 --- /dev/null +++ b/src/summersplash2022/sections/hvaSierSommerstudentene.tsx @@ -0,0 +1,68 @@ +import style from './hvaSierSommerstudente.module.css'; +import sharedStyle from '../index.module.css'; +import GreenBlob from '../img/greenBlob'; + +const summerstudentsQuotes = [ + { + name: 'Emma', + quote: `“Jeg er utrolig glad for å få være en del av variantgjengen i + sommer! Det er gøy å se hvordan kjerneverdier som åpenhet og + læreglede virkelig praktiseres i arbeidshverdagen, ikke bare + på papiret. Det gjør at jeg føler meg veldig inkludert og + lærer masse, samtidig som vi har det mye moro!\”`, + picture: require('../img/emma.svg'), + }, + { + name: 'Mathias', + quote: `“Sommeren i Variant ga meg en smakebit av hva det vil si å + være konsulent. Med ekte kunder og reelle behov lærte jeg + masse og fikk vist frem ferdighetene mine. Gjennom sosiale + arrangementer og pulserende Slack-kanaler følte jeg meg + inkludert allerede før dag én. Jevnlige sparringer ga faglig + påfyll og støtte til teamet, og folkene her er rett og slett + herlige 🤗”`, + picture: require('../img/mathias.svg'), + }, + { + name: 'Swarny', + quote: `“Sommeren hos Variant har vært helt fantastisk. Vi fikk jobbe + med et megakult og aktuelt prosjekt med god oppfølging, både + fra Variant og kunden. Selv om Variant er et konsulentselskap, + har de et godt sosialt miljø hvor alle er inkluderende, ivrige + og åpne. Jeg er superfornøyd med at + jeg søkte sommerjobb hos Variant!!”`, + picture: require('../img/swarny.svg'), + }, +]; + +const SummerstudentsQuotes = () => { + return ( + <> +
+

Hva mener årets sommerstudenter?

+ {summerstudentsQuotes.map((student) => ( +
+ {`Bilde +
+

{student.quote}

+

- {student.name}

+
+
+ ))} + + + + +
+ + ); +}; + +export default SummerstudentsQuotes; diff --git a/src/summersplash2022/sections/hvaSkjerEtterSoknadsfristen.module.css b/src/summersplash2022/sections/hvaSkjerEtterSoknadsfristen.module.css new file mode 100644 index 000000000..d39c82dc8 --- /dev/null +++ b/src/summersplash2022/sections/hvaSkjerEtterSoknadsfristen.module.css @@ -0,0 +1,157 @@ +.flex { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, auto); + grid-gap: 4rem; +} + +.about { + grid-column: 1 / span 1; + grid-row: 1 / span 1; + display: flex; + flex-direction: column; +} + +.imgDiv { + grid-column: 1 / span 1; + grid-row: 2 / span 1; + position: relative; +} + +.imgDivSummerjob { + margin-top: -10rem; +} + +.imgBlob { + position: absolute; + top: -3rem; + transform: rotate(55deg); + left: -11rem; + max-width: 31rem; +} + +.imgBlob svg { + width: 100%; + height: auto; +} + +.timeline { + grid-column: 2 / span 1; + grid-row: 1 / span 1; + margin: 0 auto; +} + +.applicationTips { + grid-column: 2 / span 1; + grid-row: 2 / span 1; + position: relative; + max-width: 28rem; + margin: 0 auto; +} + +.about, +.applicationTips h4, +.applicationTips p, +.EvenPicture { + z-index: 10; + position: relative; +} + +.textBlob { + position: absolute; + transform: rotate(250deg); + top: -3rem; + left: 1rem; +} + +.textBlob svg { + width: 100%; + height: 100%; +} + +@media (max-width: 2050px) { + .textBlob { + width: 90%; + } +} + +@media (max-width: 1300px) { + .EvenPicture { + width: 80%; + } + + .sectionLightBeige .applicationTips { + margin-top: -6rem; + } +} + +@media (max-width: 1110px) { + .flex { + grid-gap: 4rem 0; + } + + .about { + grid-column: 1 / span 2; + grid-row: 1 / span 1; + } + + .imgDiv { + grid-column: 1 / span 1; + grid-row: 3 / span 1; + margin-top: -1rem; + margin-left: -3rem; + } + + .EvenPicture { + width: 70%; + margin-top: 4rem; + } + + .imgBlob { + display: none; + } + + .timeline { + grid-column: 1 / span 2; + grid-row: 2 / span 1; + display: flex; + align-items: center; + } + + .sectionLightBeige .applicationTips, + .applicationTips { + grid-column: 2 / span 1; + grid-row: 3 / span 1; + margin-top: 6rem; + } +} + +@media (max-width: 800px) { + .flex { + display: flex; + flex-direction: column; + } + + .about { + order: 1; + } + + .imgDiv { + order: 3; + margin: auto; + } + + .EvenPicture { + display: flex; + margin: auto; + } + + .timeline { + order: 2; + } + + .applicationTips { + order: 4; + margin: auto; + } +} diff --git a/src/summersplash2022/sections/hvaSkjerEtterSonaadsfristen.tsx b/src/summersplash2022/sections/hvaSkjerEtterSonaadsfristen.tsx new file mode 100644 index 000000000..c5fe9703e --- /dev/null +++ b/src/summersplash2022/sections/hvaSkjerEtterSonaadsfristen.tsx @@ -0,0 +1,99 @@ +import style from './hvaSkjerEtterSoknadsfristen.module.css'; +import DarkRedBlob from '../img/mørkerødBlob'; +import DarkBeigeBlob from '../img/darkBeigeBlob'; +import { ApplyType } from 'src/summersplash2022/utils/utils'; + +const AfterApplying = ({ + applyType, + className, +}: { + applyType: ApplyType; + className: string; +}) => { + const Even = require('src/summersplash2022/img/Even.png'); + const timelineImage = + applyType === ApplyType.GRADUATE + ? require('../img/graduate timeline.svg') + : require('../img/timeline.svg'); + + const timelineDescription = + applyType == ApplyType.GRADUATE + ? `Søknadsfrist: 1.oktober, Kaffeprat: 4.-5.oktober, tilbud om sommerjobb: 6.oktober + sosiale og faglige arrangementer: november-juni, første arbeidsperiode: 10.juni - 5.juli (4 uker), ferie + 8.juli - 26 juli (3 uker), andre arbeidsperiode : 29.juli - 9.august (2 uker)` + : ''; + + const isApplyGraduate: boolean = applyType == ApplyType.GRADUATE; + + return ( +
+

Hva skjer etter søknadsfristen?

+
+
+

+ Vi liker ikke tradisjonelle intervjuer. De plasserer søker i en + unaturlig situasjon, og man blir ikke godt kjent med hverandre. + Etter at vi har vurdert alle søknadene inviterer vi utvalgte + kandidater til en kaffeprat. Dette er en uformell samtale hvor målet + er å bli bedre kjent med hverandre, med fokus på både det faglige og + det personlige. Og nei – du er selvsagt ikke nødt til å drikke + kaffe. +

+ {isApplyGraduate && ( +

+ Noen dager etter kaffepraten vil aktuelle kandidater inviteres til + en sammarbeidscase hvor man vil jobbe sammen med 2 andre + varianter. Man vil få oppgaven på forhånd, men man skal ikke gjøre + noen store forbredelser. +

+ )} +

+ Dersom du får jobbtilbud og takker ja, inkluderes du straks i + Variant. Du får tilgang til vår Slack, og mulighet til å delta på + faglige og sosiale arrangementer. Dette inkluderer blant annet + spill- og fagkvelder, nyttårskalas og variantdager, som er fine + muligheter til å bli bedre kjent før{' '} + {isApplyGraduate ? 'man starter' : 'sommerjobben starter i juni'}. +

+
+ +
+ Even +
+ {isApplyGraduate && } + {!isApplyGraduate && } +
+
+ +
+ {timelineDescription} +
+ +
+

Søknadstips:

+

+ Vi setter pris på en søknad med CV, søknadsbrev og karakterutskrift. + Det viktigste for oss er å få et helhetlig bilde. Både av deg som + person, din eksisterende kompetanse og dine ambisjoner. Så hvem er + du og hvorfor søker du {isApplyGraduate ? 'jobb' : 'sommerjobb'} i + Variant? Vi trenger mennesker som bryr seg om å skape en bedre + hverdag. Er det deg? +

+
+ {isApplyGraduate && } + {!isApplyGraduate && } +
+
+
+
+ ); +}; + +export default AfterApplying; diff --git a/src/summersplash2022/sections/hvemSokerVi.module.css b/src/summersplash2022/sections/hvemSokerVi.module.css new file mode 100644 index 000000000..d33e44dea --- /dev/null +++ b/src/summersplash2022/sections/hvemSokerVi.module.css @@ -0,0 +1,62 @@ +.flex { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(3, auto); + grid-gap: 0 4rem; +} + +.textAboveImg { + grid-column: 1 / span 1; + grid-row: 1 / span 1; + display: flex; + flex-direction: column; +} + +.textBelowImg { + grid-column: 1 / span 1; + grid-row: 2 / span 1; + margin-top: 1rem; +} + +.imgWrapper { + grid-column: 2 / span 1; + grid-row: 1 / span 3; + margin: auto 0; + display: flex; + align-items: center; +} + +.img { + width: 100%; + max-width: 800px; + max-height: 70vh; +} + +@media (max-width: 1500px) { + .img { + width: 90%; + } +} + +@media (max-width: 1120px) { + .flex { + display: flex; + flex-direction: column; + } + + .textBelowImg { + order: 3; + } + + .imgWrapper { + order: 2; + margin: 3rem auto; + max-width: 500px; + height: min-content; + } + + .img { + width: 100%; + margin: 0; + } +} diff --git a/src/summersplash2022/sections/hvemSokerVi.tsx b/src/summersplash2022/sections/hvemSokerVi.tsx new file mode 100644 index 000000000..76ffdf224 --- /dev/null +++ b/src/summersplash2022/sections/hvemSokerVi.tsx @@ -0,0 +1,40 @@ +import style from './hvemSokerVi.module.css'; + +const WhoAreWeSeeking = ({ className }: { className: string }) => { + const graduateNorwayMap = require('../img/graduate norway map.svg'); + return ( +
+

Hvem søker vi?

+
+

+ Vi søker 17 nyutdannede designere og utviklere som engasjerer og + motiverer, med oppstart 1. august 2024. Stillingene er fordelt på våre + kontorer i Trondheim, Oslo og Bergen. Det er ikke viktig hvilke + verktøy eller språk du bruker. Det er derimot viktig at du bryr deg. + Bryr deg om koden du skriver, bryr deg om brukeren du lager noe for, + og bryr deg om kunden du leverer til. +

+ +

+ Gjennom både strukturert og impulsiv kunnskapsutveksling lærer vi av + hverandre og de vi jobber med for å bli flinkere, modigere og rausere. + Vi elsker utfordringer hvor design- og teknologikompetanse finner + sammen og tar plass i kundens kultur. Her oppdager vi stadig at en + helhetlig tilnærming til utvikling og design skaper entusiasme og + tilfører ekstra verdi. Variant er et selskap av og for de ansatte, der + læreglede står i sentrum. Deler du også denne filosofien? +

+
+ Bergen: 2 utviklere, 1 designer, Trondheim : 4 utviklere + 4 designere, Oslo : 3 utviklere 3 designere +
+
+
+ ); +}; + +export default WhoAreWeSeeking; diff --git "a/src/summersplash2022/sections/hvordanSerF\303\270rste\303\205retUt.module.css" "b/src/summersplash2022/sections/hvordanSerF\303\270rste\303\205retUt.module.css" new file mode 100644 index 000000000..c52969678 --- /dev/null +++ "b/src/summersplash2022/sections/hvordanSerF\303\270rste\303\205retUt.module.css" @@ -0,0 +1,85 @@ +.flex { + display: flex; + flex-direction: row; + gap: 4rem; +} + +.text, +.timelineDiv { + width: calc(50% - 2rem); +} + +.imgDiv { + width: 100%; + height: 100%; + display: flex; +} + +.imgWrap { + position: relative; + margin: auto 0; +} + +.blobWrapper { + position: absolute; + left: -15rem; + bottom: -9rem; + transform: rotate(-145deg); + width: 130%; +} + +.blobWrapper svg { + width: 100%; + height: 100%; +} + +.img { + margin: auto 0; + display: flex; + z-index: 10; + width: 90%; + margin-left: -2rem; + max-width: 800px; + position: inherit; +} + +.timelineDiv { + display: flex; + justify-content: center; +} + +.timelineDiv svg { + height: 80vh; + width: auto; +} + +@media (min-width: 3500px) { + .imgDiv { + display: block; + } +} + +@media (max-width: 1700px) { + .timelineDiv { + margin: auto 0; + } +} + +@media (max-width: 1310px) { + .flex { + flex-direction: column; + } + + .text, + .timelineDiv { + width: 100%; + } + + .timelineDiv svg { + height: min-content; + } + + .img { + display: none; + } +} diff --git "a/src/summersplash2022/sections/hvordanSerF\303\270rste\303\205retUt.tsx" "b/src/summersplash2022/sections/hvordanSerF\303\270rste\303\205retUt.tsx" new file mode 100644 index 000000000..d7670b5a9 --- /dev/null +++ "b/src/summersplash2022/sections/hvordanSerF\303\270rste\303\205retUt.tsx" @@ -0,0 +1,72 @@ +import style from 'src/summersplash2022/sections/hvordanSerFørsteÅretUt.module.css'; +import sharedStyle from 'src/summersplash2022/index.module.css'; +import DarkPinkBlob from '../img/darkPinkBlob'; +import TimelineNarrow from 'src/summersplash2022/img/tidslinjeNarrow'; +import TimelineWide from 'src/summersplash2022/img/tidslinjeWide'; +import { useEffect, useState } from 'react'; + +const FirstYear = () => { + const mountain = require('src/summersplash2022/img/MountainImg.png'); + + const [showWideTimeline, setShowWideTimeline] = useState(true); + + const checkIfNarrowOrWideTimeline = () => { + if ( + window.matchMedia('(max-width: 1310px) and (min-width: 801px)').matches + ) { + setShowWideTimeline(true); + } else { + setShowWideTimeline(false); + } + }; + + const handleResize = () => { + checkIfNarrowOrWideTimeline(); + }; + + useEffect(() => { + if (window) { + checkIfNarrowOrWideTimeline(); + window.addEventListener('resize', handleResize); + } + }, []); + + return ( + <> +
+

Hvordan ser første året ut?

+
+
+

+ For å bidra til personlig og faglig utvikling av nyutdannede + gjennomfører vi oppstartsprogrammet{' '} + + variant:skudd + + . Programmet gjennomføres i løpet av det første året den + nyutdannede jobber i Variant. +

+
+
+
+ +
+ Fjelltur på Oppdal +
+
+
+
+ {showWideTimeline && } + {!showWideTimeline && } +
+
+
+ + ); +}; + +export default FirstYear; diff --git a/src/summersplash2022/sections/hvorforAkkuratVariant.module.css b/src/summersplash2022/sections/hvorforAkkuratVariant.module.css new file mode 100644 index 000000000..36d396f64 --- /dev/null +++ b/src/summersplash2022/sections/hvorforAkkuratVariant.module.css @@ -0,0 +1,118 @@ +.flex { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(3, auto); + gap: 0 4rem; +} + +.topicsDiv { + grid-column: 1 / span 1; + grid-row: 1 / span 1; +} + +.selectedTopic { + grid-column: 2 / span 1; + grid-row: 1 / span 2; +} + +.mostImportantForYouDiv { + grid-column: 1 / span 1; + grid-row: 2 / span 1; +} + +.buttons { + display: flex; + flex-direction: column; + margin: 2rem 0; +} + +.buttons button { + border: none; + margin: 1rem 0; + text-align: left; + cursor: pointer; + white-space: nowrap; + max-width: fit-content; + padding: 0.5rem; + border-radius: 0.5rem; + color: var(--color-standard__black); +} + +.buttons button:nth-of-type(1) { + background-color: var(--color-secondary3); +} + +.buttons button:nth-of-type(2) { + background-color: var(--color-secondary2__tint3); +} + +.buttons button:nth-of-type(3) { + background-color: var(--color-primary__tint3); +} + +.buttons button:nth-of-type(4) { + background-color: var(--color-secondary1__tint3); +} + +.buttons button:hover, +.buttons button:focus, +.buttons button.active { + font-weight: bold; + text-decoration: none; +} + +.mostImportantForYou { + margin: 1.8rem 0; + font-size: 1.5rem; + font-family: var(--recoleta-font-family); + font-weight: 500; +} + +.handbookPage p { + margin-bottom: 2rem; +} + +@media (max-width: 1110px) { + .flex { + display: flex; + flex-direction: column; + gap: 2rem; + } + + .topicsDiv { + order: 1; + } + + .selectedTopic { + order: 2; + } + + .mostImportantForYouDiv { + order: 3; + } + + .buttons { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; + gap: 0 1rem; + margin-bottom: 0; + } +} + +@media (max-width: 500px) { + .buttons { + margin-bottom: 0; + gap: 1rem; + } + + .buttons button { + margin: 0; + } + + .mostImportantForYou { + margin-bottom: 0; + font-weight: 400; + } +} diff --git a/src/summersplash2022/sections/hvorforAkkurattVariant.tsx b/src/summersplash2022/sections/hvorforAkkurattVariant.tsx new file mode 100644 index 000000000..5b273528d --- /dev/null +++ b/src/summersplash2022/sections/hvorforAkkurattVariant.tsx @@ -0,0 +1,61 @@ +import { useState } from 'react'; +import style from './hvorforAkkuratVariant.module.css'; +import HandBookPages, { + HandbookPage, + pageTitle, +} from 'src/summersplash2022/utils/handBookPages'; + +const WhyVariant = ({ + pages, + className, +}: { + pages: HandbookPage[]; + className: string; +}) => { + const [whichButtonSelected, setWhichButtonSelected] = useState(pages[0]); + + return ( +
+
+
+

Hvorfor akkurat Variant?

+

+ Variant er en variant av et konsulentselskap som er raust, åpent og + læreglad. Disse verdiene ligger til grunn for hvordan vi møter + hverandre, våre kunder og alle andre. I håndboken vår kan du lese om + hvordan ting gjøres i Variant, hva vi prøver å oppnå og hvorfor vi + tenker som vi gjør. Under kan du sjekke ut noen utvalgte temaer. +

+ +
+ {pages.map((page: HandbookPage) => ( + + ))} +
+
+
+

+ Hva er viktigst for deg? +

+ + Sjekk ut Variants håndbok her + +
+
+ +
+
+
+ ); +}; + +export default WhyVariant; diff --git a/src/summersplash2022/sections/lonn.module.css b/src/summersplash2022/sections/lonn.module.css new file mode 100644 index 000000000..d4313dec6 --- /dev/null +++ b/src/summersplash2022/sections/lonn.module.css @@ -0,0 +1,59 @@ +.flex { + display: flex; + flex-direction: row; + gap: 4rem; +} + +.text, +.calculator { + width: calc(50% - 2rem); +} + +.calculator { + position: relative; + max-width: 28rem; +} + +.calculatorWrapper { + width: 80%; + max-width: 23rem; + margin: 0 4rem; + position: relative; + z-index: 1; +} + +.pinkBlobWrapper svg { + width: 100%; + height: 100%; +} + +.calculatorWrapper div { + border: none; +} + +.pinkBlobWrapper { + position: absolute; + top: -4rem; + width: 90%; +} + +@media (max-width: 1110px) { + .flex { + flex-direction: column; + gap: 4rem; + } + .text, + .calculator { + width: 100%; + } + + .calculator { + margin: auto; + } +} + +@media (max-width: 900px) { + .pinkBlobWrapper { + top: -2rem; + } +} diff --git a/src/summersplash2022/nyutdannet/sections/lonn.tsx b/src/summersplash2022/sections/lonn.tsx similarity index 71% rename from src/summersplash2022/nyutdannet/sections/lonn.tsx rename to src/summersplash2022/sections/lonn.tsx index a207a1adc..103596727 100644 --- a/src/summersplash2022/nyutdannet/sections/lonn.tsx +++ b/src/summersplash2022/sections/lonn.tsx @@ -1,21 +1,20 @@ import Link from 'next/link'; -import style from 'src/summersplash2022/nyutdannet/nyutdannet.module.css'; +import style from './lonn.module.css'; import PinkBlob from '../img/pinkBlob'; import Calculator from '../utils/calculator'; const Payment = () => { return ( -
-

Lønn

-
-
+
+

Lønn

+
+

Vi er sikre på at flinke folk i liten grad lar seg motivere av lønn alene, men god lønn er like fullt viktig for den frihet og stabilitet vi ønsker å gi.

- {' '} Lønnen vår bestemmes utelukkende av en utjevnet kurve for øvre kvartil av Teknas lønnsstatistikk. Lønnsøkninger tas ikke individuelt – det går automatisk. Din lønn baseres rett og slett på @@ -23,18 +22,18 @@ const Payment = () => {

I kalkulatoren til høyre kan du se hva du vil tjene som nyutdannet. - Du kan også ta en titt på{' '} + Du kan også ta en titt på - lønnskalkulatoren - {' '} + lønnskalkulatoren + om du vil vite mer om lønn og andre goder i Variant.

-
+
-
+
diff --git "a/src/summersplash2022/sections/s\303\270kJobb.module.css" "b/src/summersplash2022/sections/s\303\270kJobb.module.css" new file mode 100644 index 000000000..ecd0357c4 --- /dev/null +++ "b/src/summersplash2022/sections/s\303\270kJobb.module.css" @@ -0,0 +1,169 @@ +.section { + display: flex; + flex-direction: column; +} + +.flex { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + grid-gap: 2rem; + flex-grow: 1; +} + +.text { + grid-column: 1 / span 1; + grid-row: 1 / span 1; + display: flex; + flex-direction: column; + max-width: 800px; +} + +.contactInfo { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 1rem; + margin-top: 1rem; +} + +.contactInfo > p { + width: min-content; + margin-top: 0; +} + +.picture { + grid-column: 2 / span 1; + grid-row: 1 / span 3; + display: flex; + justify-content: center; + align-items: center; + margin-top: -10rem; +} + +.applyDiv { + grid-column: 1 / span 1; + grid-row: 2 / span 1; +} + +.text { + display: flex; + flex-direction: column; +} + +.applyDiv { + display: flex; + flex-direction: column; + align-self: center; +} + +.text > p { + max-width: 38rem; +} + +.applyDiv p { + font-size: 1.2rem; + margin-bottom: 0.5rem; +} + +.imgWithBlob { + height: min-content; + width: 100%; + max-width: 50rem; +} + +a.buttonPink, +a.buttonBlue { + font-family: var(--recoleta-font-family); + font-size: 1.6rem; + line-height: 32px; + padding: 0.5rem 1rem; + text-decoration: none; + width: max-content; + color: var(--color-standard__black); + display: block; + margin-bottom: 1rem; + border-radius: 0.5rem; +} + +a.buttonBlue { + background-color: var(--color-secondary2__tint2); +} + +a.buttonPink { + background-color: var(--color-primary__tint2); +} + +a.buttonBlue:visited, +a.buttonPink:visited { + color: var(--color-standard__black); +} + +.variantLogo { + grid-column: 1 / span 1; + grid-row: 3 / span 1; +} +.variantLogo img { + height: 1.4rem; +} + +@media (max-width: 1300px) { + .flex { + grid-template-columns: repeat(3, auto); + grid-template-rows: min-content 1fr; + } + + .text { + grid-column: 1 / span 3; + grid-row: 1 / span 1; + } + + .picture { + grid-column: 2 / span 2; + grid-row: 2 / span 1; + } + + .applyDiv { + grid-column: 1 / span 1; + grid-row: 2 / span 1; + } +} + +@media (max-width: 800px) { + .flex { + display: flex; + flex-direction: column; + } + + .text { + order: 1; + } + + .picture { + order: 2; + margin: 1rem 0; + display: flex; + justify-content: center; + margin-top: 0; + } + + .applyDiv { + order: 3; + gap: 2rem; + } + + .applyDiv p { + display: none; + } + + .imgWithBlob { + width: 80%; + } + + .variantLogo { + order: 4; + display: flex; + flex-grow: 1; + align-items: flex-end; + } +} diff --git "a/src/summersplash2022/sections/s\303\270kJobb.tsx" "b/src/summersplash2022/sections/s\303\270kJobb.tsx" new file mode 100644 index 000000000..7d6050b18 --- /dev/null +++ "b/src/summersplash2022/sections/s\303\270kJobb.tsx" @@ -0,0 +1,78 @@ +import style from './søkJobb.module.css'; +import sharedStyle from '../index.module.css'; +import { ApplyType } from 'src/summersplash2022/utils/utils'; +import ApplyImgWithBlob from 'src/summersplash2022/img/applyImgWithBlob'; + +const Apply = ({ applyType }: { applyType: ApplyType }) => { + const isApplyGraduate = applyType == ApplyType.GRADUATE; + const variantImg = require(isApplyGraduate + ? 'src/components/page-header/whiteVariant.svg' + : 'src/components/page-header/variant.svg'); + + return ( +
+

+ Søk {isApplyGraduate ? 'fast jobb' : 'sommerjobb'} +

+
+
+

+ Vi håper du søker, og vi ser frem til å bli bedre kjent med deg. Har + du spørsmål om {isApplyGraduate ? 'fast jobb' : 'sommerjobben'}{' '} + eller Variant? Ta gjerne kontakt med meg. +

+

- Marius Krakeli, Chief Recruitment Officer

+
+

+ 41637572 +

+

|

+

+ mk@variant.no +

+
+
+
+

Søk {isApplyGraduate ? 'fast jobb' : 'sommerjobb'}:

+ + Søk som designer + + + Søk som utvikler + +
+ +
+ Variant +
+ +
+ +
+
+
+ ); +}; + +export default Apply; diff --git a/src/summersplash2022/nyutdannet/utils/calculator.tsx b/src/summersplash2022/utils/calculator.tsx similarity index 97% rename from src/summersplash2022/nyutdannet/utils/calculator.tsx rename to src/summersplash2022/utils/calculator.tsx index 985329335..a36b6cd1d 100644 --- a/src/summersplash2022/nyutdannet/utils/calculator.tsx +++ b/src/summersplash2022/utils/calculator.tsx @@ -37,9 +37,10 @@ const Calculator = () => {
{ - if (selectedButton === 'Formal og verdier') { - return ( -
-

- Formål og verdier -

-

- Så, hvorfor Variant? Hvorfor er vi egentlig til? Vårt formål er å - utvikle samfunnet vi lever i. Flinke personer som tenker nye tanker, - og så lager de riktige løsningene. -

-

- Våre tre grunnverdier er: -

-

- Raushet - Dette vises i hvordan vi møter hverandre, - våre kunder og folk i nærmiljøet. -

-

- Åpenhet - Hva i all verden skal et selskap tjene på å - holde informasjon hemmelig for sine ansatte? -

-

- Læreglede - Vi er folk som ønsker å lære og lære - bort. Vi skal ha ydmykhet nok til å skjønne at vi kan lære noe fra - alle, og troen på at alle kan lære noe fra oss. -

-

- Disse verdiene ligger til grunn for hvordan vi behandler hverandre. - Det skal være lav terskel for ros og tilbakemeldinger fordi vi ønsker - at du lykkes. Vær den som sier hva du har på hjertet ditt og som tør å - utfordre sannheter og gjeldende praksis. -

-
- ); - } else if (selectedButton === 'Tillit og ansvar') { - return ( -
-

- Tillit og ansvar -

-

- Variant vil gi sine ansatte det beste, vi som jobber her forventes å - gi det samme. Vi gir full tillit til hverandre fordi vi tror at alle - er i stand til å gjøre riktige valg. Hva du trenger for å lære noe - nytt eller gjøre jobben din er opp til deg. Vi forventer bare at du - selv vurderer kostnadene opp mot vinningen og sparrer med andre når - det trengs. -

-

- Ha det morsomt - Et arbeidsliv består av maaaange - timer. Vi vil gjøre noe som gir mening og samtidig ha det morsomt. Det - spekuleres i om Variant eksisterer fordi det er hyggeligere å skape - noe sammen med mennesker man trives med. Det får vi nok ikke svaret - på, men inntil videre så kan du le ofte og gjøre gærne ting! -

-

- Vær stolt - Vi vil at du skal være stolt av det du - gjør. Er du ikke den stolte typen? Da vil vi gjerne at du har mot til - å endre på det. Du skal kunne være stolt av å være her, nettopp fordi - du har gjort så mye bra tidligere. Så rett deg opp i ryggen, og si at - du jobber i Variant. 🦄 -

-
- ); - } else if (selectedButton === 'Variantdag') { - return ( -
-

- Variantdag -

-

- Den første fredagen i hver måned (foruten januar og juli) har vi det - vi kaller en variantdag. Dette er en “innedag”, der vi alle bruker - hele dagen sammen, for faglig, administrativt og sosialt påfyll. - Dersom du takker ja til et tilbud om sommerjobb hos oss er du - selvfølgelig invitert til å bli med. -

+export enum HandbookPage { + INTENTIONS_AND_VALUES, + WORK, + SOCIAL, + PERKS, + TRUST_AND_RESPONSIBILITY, + VARIANTDAY, + ENVIRONMENT_LIGHTHOUSE, + NONE, +} -

- Her vil du alltid finne oversikt over gjennomførte og planlagte - variantdager. -

-
- ); - } else if (selectedButton === 'Miljofyrtarn') { - return ( -
-

- Miljøfyrtårn -

-

- Bærekraft for Variant innebærer mye. Det er likestilling i - arbeidslivet, en bærekraftig arbeidsdag, som både er spennende, - utfordrende og lærerik. Vi ønsker at valgene vi gjør skal begrense - vårt klimaavtrykk. Vi skal skape en kultur hvor vi er nysgjerrige, - stiller spørsmål og tar gode valg. Vi setter oss årlige mål om å - redusere vår belastning på miljøet, vi kildesorterer og fører regnskap - over eget avfall, energiforbruk og reiser med fly og bil. - Miljøfyrtårnansvarlig har ansvar for oppfølging og håndtering av - dette. -

-
- ); - } else { - return <>; +export const pageTitle = (page: HandbookPage): string => { + switch (page) { + case HandbookPage.INTENTIONS_AND_VALUES: + return 'Formål og verdier'; + case HandbookPage.WORK: + return 'Arbeidet'; + case HandbookPage.SOCIAL: + return 'Det sosiale'; + case HandbookPage.PERKS: + return 'Goder og ytelser'; + case HandbookPage.TRUST_AND_RESPONSIBILITY: + return 'Tillit og ansvar'; + case HandbookPage.VARIANTDAY: + return 'Variantdag'; + case HandbookPage.ENVIRONMENT_LIGHTHOUSE: + return 'Miljøfyrtårn'; + case HandbookPage.NONE: + return ''; } }; -export default HandBooKPages; + +const HandBookPages = ({ selectedPage }: { selectedPage: HandbookPage }) => { + switch (selectedPage) { + case HandbookPage.INTENTIONS_AND_VALUES: + return ( +
+

Formål og verdier

+

+ Så, hvorfor Variant? Hvorfor er vi egentlig til? Vårt formål er å + utvikle samfunnet vi lever i. Flinke personer som tenker nye tanker, + og så lager de riktige løsningene. +

+

+ Våre tre grunnverdier er: +

+

+ Raushet - Dette vises i hvordan vi møter hverandre, + våre kunder og folk i nærmiljøet. +

+

+ Åpenhet - Hva i all verden skal et selskap tjene på + å holde informasjon hemmelig for sine ansatte? +

+

+ Læreglede - Vi er folk som ønsker å lære og lære + bort. Vi skal ha ydmykhet nok til å skjønne at vi kan lære noe fra + alle, og troen på at alle kan lære noe fra oss. +

+

+ Disse verdiene ligger til grunn for hvordan vi behandler hverandre. + Det skal være lav terskel for ros og tilbakemeldinger fordi vi + ønsker at du lykkes. Vær den som sier hva du har på hjertet ditt og + som tør å utfordre sannheter og gjeldende praksis. +

+
+ ); + case HandbookPage.TRUST_AND_RESPONSIBILITY: + return ( +
+

Tillit og ansvar

+

+ Variant vil gi sine ansatte det beste, vi som jobber her forventes å + gi det samme. Vi gir full tillit til hverandre fordi vi tror at alle + er i stand til å gjøre riktige valg. Hva du trenger for å lære noe + nytt eller gjøre jobben din er opp til deg. Vi forventer bare at du + selv vurderer kostnadene opp mot vinningen og sparrer med andre når + det trengs. +

+

+ Ha det morsomt - Et arbeidsliv består av maaaange + timer. Vi vil gjøre noe som gir mening og samtidig ha det morsomt. + Det spekuleres i om Variant eksisterer fordi det er hyggeligere å + skape noe sammen med mennesker man trives med. Det får vi nok ikke + svaret på, men inntil videre så kan du le ofte og gjøre gærne ting! +

+

+ Vær stolt - Vi vil at du skal være stolt av det du + gjør. Er du ikke den stolte typen? Da vil vi gjerne at du har mot + til å endre på det. Du skal kunne være stolt av å være her, nettopp + fordi du har gjort så mye bra tidligere. Så rett deg opp i ryggen, + og si at du jobber i Variant. 🦄 +

+
+ ); + case HandbookPage.VARIANTDAY: + return ( +
+

Variantdag

+

+ Den første fredagen i hver måned (foruten januar og juli) har vi det + vi kaller en variantdag. Dette er en “innedag”, der vi alle bruker + hele dagen sammen, for faglig, administrativt og sosialt påfyll. + Dersom du takker ja til et tilbud om sommerjobb hos oss er du + selvfølgelig invitert til å bli med. +

+ +

+ Her vil du alltid finne oversikt over gjennomførte og planlagte + variantdager. +

+
+ ); + case HandbookPage.ENVIRONMENT_LIGHTHOUSE: + return ( +
+

Miljøfyrtårn

+

+ Bærekraft for Variant innebærer mye. Det er likestilling i + arbeidslivet, en bærekraftig arbeidsdag, som både er spennende, + utfordrende og lærerik. Vi ønsker at valgene vi gjør skal begrense + vårt klimaavtrykk. Vi skal skape en kultur hvor vi er nysgjerrige, + stiller spørsmål og tar gode valg. Vi setter oss årlige mål om å + redusere vår belastning på miljøet, vi kildesorterer og fører + regnskap over eget avfall, energiforbruk og reiser med fly og bil. + Miljøfyrtårnansvarlig har ansvar for oppfølging og håndtering av + dette. +

+
+ ); + case HandbookPage.WORK: + return ( +
+

Arbeidet

+

+ Fleksitid - En arbeidsdag er på 7,5 timer. Hvordan + disse fordeles på en dag bestemmer du selv, gitt at ikke annet er + avtalt på prosjektet du jobber på. +

+

+ Det kan også hende at du i noen perioder ønsker eller trenger å + kunne bruke mindre tid på jobb. Derfor har du hos oss muligheten til + å senke stillingsgraden i perioder. Med åpenhet mellom deg, ledere + og kunden om behovet og ønskene dine, vil vi sammen jobbe for å + finne løsningen alle trives med. +

+

+ Kompetanseutvikling - For å være gode er det viktig + med faglig påfyll! Variant tilrettelegger for at alle ansatte skal + kunne utvikle seg, både faglig og personlig. Dette gjøres blant + annet gjennom Variantdager, + Variant: skudd og{' '} + + tilrettelegging for deltagelse på konferanser. + +

+

+ Verktøy - Skikkelig jobb krever skikkelige verktøy. + Du velger selv datamaskin og størrelse, farge og modell på den. Vi + stoler på at du velger det beste for at du skal kunne gjøre en best + mulig jobb. Det er ikke et gitt antall års brukstid på maskinene. Du + får en ny maskin når behovet oppstår, uavhengig av om det har gått + ett eller tre år. +

+

+ Som konsulenter selger vi ekspertise og kunnskap, så invester gjerne + i bøker, kurs og annet læringsmateriale. Bare husk å sende regningen + til regnskap. Den betales med stor glede! 🤓 +

+
+ ); + case HandbookPage.SOCIAL: + return ( +
+

Det sosiale

+

+ Variantdag - I tillegg til faglig påfyll er dette + en god mulighet til å ha det hyggelig sammen. +

+

+ Donut - Annenhver uke blir du satt sammen med en + tilfeldig trekt kollega, og oppfordret til å bruke litt tid på å bli + bedre kjent. Gjerne over en kaffe eller en donut. +

+

+ Månedlig frokost - + En gang i måneden møtes vi ute for å spise en digg frokost sammen. +

+

+ Fester (Nyttårskalas, julebord, sommerfest) - + Selv om studenttilværelsen kanskje snart er over blir det fortsatt + mange muligheter for sene kvelder. Ta gjerne med en +1! +

+

+ Utenlandstur - I september hvert år drar vi på + Varianttur. +

+

+ Slackkanaler - + Har du noe du brenner for eller har lyst til å lære mer om? I Slack + har vi kanaler for alt fra musikk, planter og gaming til en kanal + for diskusjon av ølkalendere. Det er alltids mulig å lage flere + også. +

+

+ Sossis-fond - I tillegg til de faste sosiale + aktivitetene har vi et fond på 50 000 kr som brukes på andre sosiale + aktiviteter. Dette kan være aktiviteter som hytteleie i Sverige, + fjellturer, Rush trampolinepark, matlaging eller hva enn vi kommer + på kan være en god idé. +

+
+ ); + + case HandbookPage.PERKS: + return ( +
+

Goder

+

+ God lønn - Dette sikrer den stabiliteten og + friheten vi ønsker å gi. Sjekk ut{' '} + lønnskalkulatoren vår eller scroll lenger + ned for å lese mer om lønn +

+

+ Gadgets - Hvert år har du 11 000 pluss moms (dvs. + 13 750 i praksis) til å kjøpe gadgets. +

+

+ Trening - + Variant dekker treningsutgifter opptil 500/mnd (dette kan være + medlemskap på senter, treningsutstyr eller noe annet + treningsrelatert). +

+

+ Fri telefoni (innenfor rimelighetens grenser). +

+

+ Bredbånd hjemme - Variant dekker bredbånd inntil + 500 kr/mnd.{' '} +

+

+ Forsikring - Ut over vanlig yrkesskadeforsikringer + får du reiseforsikring for hele familien, gruppelivsforsikring, + behandlingsforsikring og dekning for annen ulykke enn yrkesskade. +

+

+ Utvidede rettigheter til egenmelding og sykepenger. +

+
+ ); + default: + return
; + } +}; +export default HandBookPages; diff --git a/src/summersplash2022/utils/utils.tsx b/src/summersplash2022/utils/utils.tsx index 2d1e5286a..786a3f40d 100644 --- a/src/summersplash2022/utils/utils.tsx +++ b/src/summersplash2022/utils/utils.tsx @@ -1,5 +1,6 @@ -export interface WhichButtonPressed { - selectedButton: string; +export enum ApplyType { + GRADUATE, + SUMMER, } export const changeNavbarColor = ( @@ -16,7 +17,6 @@ export const changeNavbarColor = ( if (scrollContainer) { scrollContainer.addEventListener('scroll', () => { setOffset(scrollContainer.scrollTop); - // console.log(offset); }); if (offset < 899) { setNavColor(false);