diff --git a/web/public/images/david.png b/web/public/images/david.png new file mode 100644 index 00000000..9342f6e7 Binary files /dev/null and b/web/public/images/david.png differ diff --git a/web/public/images/workshop.png b/web/public/images/workshop.png new file mode 100644 index 00000000..32cdcd08 Binary files /dev/null and b/web/public/images/workshop.png differ diff --git a/web/src/components/HomePage/ContactSection/CampaignContact.tsx b/web/src/components/HomePage/ContactSection/CampaignContact.tsx new file mode 100644 index 00000000..0ff9492a --- /dev/null +++ b/web/src/components/HomePage/ContactSection/CampaignContact.tsx @@ -0,0 +1,125 @@ +import { useEffect, useState } from 'react'; +import './styles.css'; + +interface Props { + subject: string; +} + +const CampaignContact = ({ subject }: Props) => { + const [dispatchSuccess, setDispatchSuccess] = useState(false); + const [hasMountedForm, setHasMountedForm] = useState(false); + const [isDispatching, setIsDispatching] = useState(false); + + function mountFormDispatcher() { + const form = document.querySelector('form'); + if (!form) return; + setHasMountedForm(true); + form.addEventListener('submit', async (e) => { + setIsDispatching(true); + e.preventDefault(); + + try { + const formData = new FormData(form); + const formObject = Object.fromEntries(formData); + const jsonPayload = JSON.stringify(formObject); + const response = await fetch('https://api.web3forms.com/submit', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Accept: 'application/json', + }, + body: jsonPayload, + }); + if (response.ok) { + setDispatchSuccess(true); + } + } catch (err) { + console.error(err); + } finally { + setTimeout(() => { + setIsDispatching(false); + }, 2000); + } + }); + } + + useEffect(() => { + if (!hasMountedForm) { + mountFormDispatcher(); + } + }); + return ( + <> +
+
+ + + +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ + +
+
+
+

+ Takk for din henvendelse!

+

+

Vi vil kontakte deg snart for å avtale tid for gratis konsultasjon.

+
+ + ); +} + +export default CampaignContact; diff --git a/web/src/pages/kampanjer/selskap/index.tsx b/web/src/pages/kampanjer/selskap/index.tsx index 8cb0935b..0e225bc4 100644 --- a/web/src/pages/kampanjer/selskap/index.tsx +++ b/web/src/pages/kampanjer/selskap/index.tsx @@ -1,83 +1,216 @@ -import { ContactSection } from '../../../components/HomePage'; +import { useRef } from 'react'; import { NextPageWithLayout } from '../../_app'; +import CampaignContact from '../../../components/HomePage/ContactSection/CampaignContact'; const CompanyPage: NextPageWithLayout = () => { - const sections = [ - { - title: 'Realisere din idé', - text: 'Vi ser ofte at selskaper står ovenfor utfordringer med å realisere sine prosjekter raskt og kostnadseffektivt. Å leie inn et team av konsulenter som jobber digitalt eller in-house kan ofte være en mer lønnsom og bedre løsning enn å ansette flere folk for enkeltstående prosjekter.', - imageUrl: '/static/photos/tjenester/kodeworks-tjenester1.png', - imageAlt: 'Bilde av tech folk som sitter rundt et bord med pcer.', - reverse: false, - }, - { - title: 'Hva får du?', - text: 'Sammen gjennomgår vi dine prosjektkrav, og kommer med anbefalinger for hvordan du kan realisere prosjektet. Vi gir deg en oversikt over hva som er mulig å få til, og hva som er realistisk innenfor din tidsramme og budsjett.', - imageUrl: - 'https://cdn.sanity.io/images/zkl0178p/production/d763f0c01be6aea31f7da09052738ded1db0db73-960x522.jpg', - imageAlt: 'Håndtrykk mellom to personer.', - reverse: true, - }, - ]; const contact = { title: 'Book gratis konsulenttime', subject: 'Kampanje større selskap', - redirect: 'https://kodeworks.no/takk', + redirect: 'https://kodeworks.no/kampanjer/selskap/#kontaktoss', + }; + + const section2Ref = useRef(null); + + const contactRef = useRef(null); + const headerHeight = 85 + 10; // Height of the fixed header in pixels + + function calcOffsetPosition(element: HTMLElement) { + const elementPosition = element.getBoundingClientRect().top; + return elementPosition + window.scrollY - headerHeight; + }; + + const scrollToSection2 = () => { + if (section2Ref.current) { + window.scrollTo({ + top: calcOffsetPosition(section2Ref.current), + behavior: 'smooth' + }); + } + }; + + function scrollToContact() { + if (contactRef.current) { + window.scrollTo({ + top: calcOffsetPosition(contactRef.current), + behavior: 'smooth' + }); + } }; return ( -
-
-
-
-

Gratis

-

konsulenttime

+
+ +
+
+
+
- +
+
+

Gratis

+

konsulenttime

+
+ +

+ {/* Vi hjelper deg med å finne ut hvordan du kan realisere ditt prosjekt. */} + + Vi ser ofte at selskaper står ovenfor utfordringer med å realisere sine prosjekter raskt + og kostnadseffektivt. +

+ + +
+
+
+ + + +
+
- {/* -
-

- Vi tilbyr gratis konsulenttime for selskap som ønsker å realisere sine IT-prosjekter. -

+
+

+ Selskaper som bruker Kodeworks +

+
+ + + + + + +
+

+ Hva får du? + +

+
+
+
+ + + + +
- */} -
- -
- {sections.map((section, index) => { - return ( -
Gå gjennom problemstillinger +
+
+
+ + + + + +
+ Eksperthjelp i 30 minutter +
+
+
+ + - {section.imageAlt} -
-
-

{section.title}

- {section.text &&

{section.text}

} -
-
- - ); - })} + + + +
+ Budsjettvurdering +
+ + +
+ + +
+

+ Book en uforpliktende gratis konsulenttime +

+
+
+ +
+
+

David Garner

+

Konsulent, Kodeworks

+
+
+ + +
+
); }; +function BookNowBtn({ handleClick }: { handleClick: () => void }) { + return ( + + ) +} + CompanyPage.getInitialProps = async () => { return { disableContact: true, diff --git a/web/src/pages/kampanjer/startup/index.tsx b/web/src/pages/kampanjer/startup/index.tsx index 71d9797c..79f4a46d 100644 --- a/web/src/pages/kampanjer/startup/index.tsx +++ b/web/src/pages/kampanjer/startup/index.tsx @@ -1,85 +1,223 @@ -import { useRouter } from 'next/router'; import { NextPageWithLayout } from '../../_app'; -import { ContactSection } from '../../../components/HomePage'; +import CampaignContact from '../../../components/HomePage/ContactSection/CampaignContact'; +import { useRef } from 'react'; const StartupPage: NextPageWithLayout = () => { - const sections = [ - { - title: 'Realisere din idé', - text: 'Vi ser ofte at startups står ovenfor utfordringer med å realisere sine prosjekter raskt og kostnadseffektivt. Å leie inn et team av konsulenter som jobber digitalt eller in-house kan ofte være en mer lønnsom og bedre løsning enn å ansette flere folk for enkeltstående prosjekter.', - imageUrl: '/static/photos/tjenester/kodeworks-tjenester1.png', - imageAlt: 'Bilde av tech folk som sitter rundt et bord med pcer.', - reverse: false, - }, - { - title: 'Hva får du?', - text: 'Sammen gjennomgår vi dine prosjektkrav, og kommer med anbefalinger for hvordan du kan realisere prosjektet. Vi gir deg en oversikt over hva som er mulig å få til, og hva som er realistisk innenfor din tidsramme og budsjett.', - imageUrl: - 'https://cdn.sanity.io/images/zkl0178p/production/d763f0c01be6aea31f7da09052738ded1db0db73-960x522.jpg', - imageAlt: 'Håndtrykk mellom to personer.', - reverse: true, - }, - ]; - const contact = { title: 'Book gratis konsulenttime', subject: 'Kampanje startups', redirect: 'https://kodeworks.no/takk', } + const section2Ref = useRef(null); + + const contactRef = useRef(null); + const headerHeight = 85 + 10; // Height of the fixed header in pixels + + function calcOffsetPosition(element: HTMLElement) { + const elementPosition = element.getBoundingClientRect().top; + return elementPosition + window.scrollY - headerHeight; + }; + + const scrollToSection2 = () => { + if (section2Ref.current) { + window.scrollTo({ + top: calcOffsetPosition(section2Ref.current), + behavior: 'smooth' + }); + } + }; + + function scrollToContact() { + if (contactRef.current) { + window.scrollTo({ + top: calcOffsetPosition(contactRef.current), + behavior: 'smooth' + }); + } + }; + return ( -
-
-
-
-

Gratis

-

konsulenttime

+
+ +
+
+
+
- +
+
+

Gratis

+

konsulenttime

+
- {/* -
-

- Vi tilbyr gratis konsulenttime for start-ups og scale-ups som ønsker å realisere sine - IT-prosjekter. +

+ Vi hjelper deg med å finne ut hvordan du kan realisere ditt prosjekt.

+ + +
+
+
+ + + +
+
+ +
+

+ Selskaper som bruker Kodeworks +

+
+
+ +
+
+ +
+
+ +
+
+
- */} - -
-
- {sections.map((section, index) => { - return ( -
+ +
+
+ +
+ +

+ Hva får du? + +

+
+
+
+ + + + + +
+ Gå gjennom problemstillinger +
+
+
+ + - {section.imageAlt} -
-
-

{section.title}

- {section.text &&

{section.text}

} -
-
- - ); - })} + + + +
+ Eksperthjelp i 30 minutter +
+
+
+ + + + + +
+ Budsjettvurdering +
+ + +
+ + +
+

+ Book en uforpliktende gratis konsulenttime +

+
+
+ +
+
+

David Garner

+

Konsulent, Kodeworks

+
+
+ + +
+
); }; +function BookNowBtn({ handleClick }: { handleClick: () => void }) { + return ( + + ) +} StartupPage.getInitialProps = async () => { return { disableContact: true,