Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,10 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
-import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
@@ -31,22 +31,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Hjem",
-          id: "hero",
-        },
-        {
-          name: "Tjenester",
-          id: "tjenester",
-        },
-        {
-          name: "Om oss",
-          id: "om-oss",
-        },
-        {
-          name: "Kontakt",
-          id: "kontakt",
-        },
+        { name: "Hjem", id: "hero" },
+        { name: "Tjenester", id: "tjenester" },
+        { name: "Om oss", id: "om-oss" },
+        { name: "Kontakt", id: "kontakt" },
       ]}
       brandName="Joar Nilson & Co"
     />
@@ -54,48 +42,14 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroBillboardRotatedCarousel
-      background={{
-        variant: "plain",
-      }}
+      background={{ variant: "plain" }}
       title="Din lokale rørlegger i Kristiansund"
       description="Vi leverer alt innen rørleggertjenester for private og bedrifter – med fokus på kvalitet, trygghet og god service."
-      buttons={[
-        {
-          text: "Kontakt oss i dag",
-          href: "#kontakt",
-        },
-      ]}
+      buttons={[{ text: "Kontakt oss i dag", href: "#kontakt" }]}
       carouselItems={[
-        {
-          id: "1",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-senior-man-holding-his-tablet-kitchen_23-2148404378.jpg",
-          imageAlt: "professional plumber working kitchen sink",
-        },
-        {
-          id: "2",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-still-life-arrangement-pvc_23-2149062931.jpg",
-          imageAlt: "professional plumber working kitchen sink",
-        },
-        {
-          id: "3",
-          imageSrc: "http://img.b2bpic.net/free-photo/service-man-instelling-house-heating-system-floor_1303-26531.jpg",
-          imageAlt: "professional plumber working kitchen sink",
-        },
-        {
-          id: "4",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-opening-faucet-looking-jet-water_259150-59268.jpg",
-          imageAlt: "professional plumber working kitchen sink",
-        },
-        {
-          id: "5",
-          imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721520.jpg",
-          imageAlt: "professional plumber working kitchen sink",
-        },
-        {
-          id: "6",
-          imageSrc: "http://img.b2bpic.net/free-photo/set-tools-table-plumber-opening-tap_259150-58274.jpg",
-          imageAlt: "professional plumber working kitchen sink",
-        },
+        { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/modern-senior-man-holding-his-tablet-kitchen_23-2148404378.jpg", imageAlt: "professional plumber working kitchen sink" },
+        { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/service-man-instelling-house-heating-system-floor_1303-26531.jpg", imageAlt: "professional plumber working kitchen sink" },
+        { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721520.jpg", imageAlt: "professional plumber working kitchen sink" },
       ]}
     />
   </div>
@@ -119,56 +73,11 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          id: "1",
-          title: "Rørinstallasjoner",
-          author: "Pro",
-          description: "Moderne rørinstallasjoner til nye bygg og tilbygg.",
-          tags: [
-            "nybygg",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/set-repair-equipments-flask_23-2148067773.jpg",
-        },
-        {
-          id: "2",
-          title: "Rehabilitering av bad",
-          author: "Pro",
-          description: "Totalrenovering av bad fra start til slutt.",
-          tags: [
-            "oppussing",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-pipe-wrench-screwing-nut_181624-49738.jpg",
-        },
-        {
-          id: "3",
-          title: "Vedlikehold & Service",
-          author: "Pro",
-          description: "Faste vedlikeholdsavtaler for optimal drift.",
-          tags: [
-            "service",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/ratchets-nozzles-wooden-table_23-2148180590.jpg",
-        },
-        {
-          id: "4",
-          title: "Feilsøking",
-          author: "Pro",
-          description: "Rask feilsøking ved lekkasjer og driftsproblemer.",
-          tags: [
-            "akutt",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/man-adjusting-water-tap-with-wrench_259150-58269.jpg",
-        },
-        {
-          id: "5",
-          title: "Oppgradering",
-          author: "Pro",
-          description: "Effektiv oppgradering av dine eksisterende rørsystemer.",
-          tags: [
-            "fornyelse",
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990730.jpg",
-        },
+        { id: "1", title: "Rørinstallasjoner", author: "Pro", description: "Moderne rørinstallasjoner til nye bygg og tilbygg.", tags: ["nybygg"], imageSrc: "http://img.b2bpic.net/free-photo/set-repair-equipments-flask_23-2148067773.jpg" },
+        { id: "2", title: "Rehabilitering av bad", author: "Pro", description: "Totalrenovering av bad fra start til slutt.", tags: ["oppussing"], imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-pipe-wrench-screwing-nut_181624-49738.jpg" },
+        { id: "3", title: "Vedlikehold & Service", author: "Pro", description: "Faste vedlikeholdsavtaler for optimal drift.", tags: ["service"], imageSrc: "http://img.b2bpic.net/free-photo/ratchets-nozzles-wooden-table_23-2148180590.jpg" },
+        { id: "4", title: "Feilsøking", author: "Pro", description: "Rask feilsøking ved lekkasjer og driftsproblemer.", tags: ["akutt"], imageSrc: "http://img.b2bpic.net/free-photo/man-adjusting-water-tap-with-wrench_259150-58269.jpg" },
+        { id: "5", title: "Oppgradering", author: "Pro", description: "Effektiv oppgradering av dine eksisterende rørsystemer.", tags: ["fornyelse"], imageSrc: "http://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990730.jpg" },
       ]}
       title="Våre tjenester"
       description="Vi tilbyr et bredt spekter av rørleggertjenester for å møte dine behov."
@@ -182,21 +91,9 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "1",
-          value: "100%",
-          description: "Fornøyde kunder",
-        },
-        {
-          id: "2",
-          value: "20+",
-          description: "Års erfaring",
-        },
-        {
-          id: "3",
-          value: "24/7",
-          description: "Tilgjengelighet",
-        },
+        { id: "1", value: "100%", description: "Fornøyde kunder" },
+        { id: "2", value: "20+", description: "Års erfaring" },
+        { id: "3", value: "24/7", description: "Tilgjengelighet" },
       ]}
       title="Hvorfor velge oss?"
       description="Vi er kjent for vår pålitelighet, raske respons og profesjonelle holdning i alle ledd."
@@ -209,60 +106,14 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",
-          name: "Lise Johansen",
-          role: "Privatkunde",
-          company: "Kristiansund",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-construction-workers-posing_23-2149366628.jpg",
-        },
-        {
-          id: "2",
-          name: "Erik Solberg",
-          role: "Daglig leder",
-          company: "Bedrift AS",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-young-office-worker-woman-sitting-office-desk-happy-excited-with-arms-raised-smiling-cheerfully-office_141793-21244.jpg",
-        },
-        {
-          id: "3",
-          name: "Marit Hansen",
-          role: "Huseier",
-          company: "Kristiansund",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/female-male-workers-wearing-work-clothes_273609-10992.jpg",
-        },
-        {
-          id: "4",
-          name: "Per Olsen",
-          role: "Enebolig",
-          company: "Kristiansund",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/unpleased-showing-stop-gesture-young-builder-man-uniform-holding-gas-wrench-isolated-blue-background_141793-134626.jpg",
-        },
-        {
-          id: "5",
-          name: "Turid Berg",
-          role: "Bad-rehab kunde",
-          company: "Kristiansund",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/couple-together-kitchen-drinking-coffee_1303-22224.jpg",
-        },
+        { id: "1", name: "Lise Johansen", role: "Privatkunde", company: "Kristiansund", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-construction-workers-posing_23-2149366628.jpg" },
+        { id: "2", name: "Erik Solberg", role: "Daglig leder", company: "Bedrift AS", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-young-office-worker-woman-sitting-office-desk-happy-excited-with-arms-raised-smiling-cheerfully-office_141793-21244.jpg" },
+        { id: "3", name: "Marit Hansen", role: "Huseier", company: "Kristiansund", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/female-male-workers-wearing-work-clothes_273609-10992.jpg" },
       ]}
       kpiItems={[
-        {
-          value: "4.9/5",
-          label: "Google Rating",
-        },
-        {
-          value: "500+",
-          label: "Fullførte prosjekter",
-        },
-        {
-          value: "100%",
-          label: "Anbefales",
-        },
+        { value: "4.3/5", label: "Google Rating" },
+        { value: "500+", label: "Fullførte prosjekter" },
+        { value: "100%", label: "Anbefales" },
       ]}
       title="Hva våre kunder sier"
       description="Kunder stoler på oss når det virkelig gjelder."
@@ -273,21 +124,9 @@ export default function LandingPage() {
       <FaqSplitText
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "1",
-          title: "Hvor raskt kan dere stille opp?",
-          content: "Vi prioriterer akutte oppdrag og forsøker alltid å hjelpe så raskt som mulig.",
-        },
-        {
-          id: "2",
-          title: "Tilbyr dere befaring?",
-          content: "Ja, vi kommer gjerne på befaring for å gi et uforpliktende pristilbud.",
-        },
-        {
-          id: "3",
-          title: "Er dere godkjent bedrift?",
-          content: "Selvfølgelig, vi er en godkjent rørleggerbedrift med alle nødvendige sertifiseringer.",
-        },
+        { id: "1", title: "Hvor raskt kan dere stille opp?", content: "Vi prioriterer akutte oppdrag og forsøker alltid å hjelpe så raskt som mulig." },
+        { id: "2", title: "Tilbyr dere befaring?", content: "Ja, vi kommer gjerne på befaring for å gi et uforpliktende pristilbud." },
+        { id: "3", title: "Er dere godkjent bedrift?", content: "Selvfølgelig, vi er en godkjent rørleggerbedrift med alle nødvendige sertifiseringer." },
       ]}
       sideTitle="Ofte stilte spørsmål"
       sideDescription="Har du spørsmål om rørleggertjenester? Her finner du svar på det vi oftest blir spurt om."
@@ -296,39 +135,28 @@ export default function LandingPage() {
   </div>
 
   <div id="kontakt" data-section="kontakt">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "plain",
-      }}
-      text="Trenger du hjelp fra en rørlegger? Ring oss eller send en melding for et uforpliktende tilbud."
-      buttons={[
-        {
-          text: "Ring oss: 71 67 00 00",
-          href: "tel:71670000",
-        },
-        {
-          text: "Send e-post",
-          href: "mailto:post@joarnilson.no",
-        },
+      <ContactSplitForm
+      useInvertedBackground={true}
+      title="Kontakt oss"
+      description="Trenger du hjelp fra en rørlegger? Fyll ut skjemaet for et uforpliktende tilbud."
+      inputs={[
+        { name: "navn", type: "text", placeholder: "Ditt navn" },
+        { name: "epost", type: "email", placeholder: "Din e-post" }
       ]}
+      imageSrc="http://img.b2bpic.net/free-photo/plumbing-service-customer-s-house_23-2148404378.jpg"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoReveal
+      <FooterLogoEmphasis
       logoText="Joar Nilson & Co"
-      leftLink={{
-        text: "Personvern",
-        href: "#",
-      }}
-      rightLink={{
-        text: "© 2024 Joar Nilson & Co AS",
-        href: "#",
-      }}
+      columns={[
+          { items: [{ label: "Tjenester", href: "#tjenester" }, { label: "Om oss", href: "#om-oss" }] },
+          { items: [{ label: "Personvern", href: "#" }, { label: "Kontakt", href: "#kontakt" }] }
+      ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f5f5;
-  --card: #ffffff;
-  --foreground: #1c1c1c;
-  --primary-cta: #1f514c;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
+  --primary-cta: #e6e6e6;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #1c1c1c;
-  --accent: #159c49;
-  --background-accent: #a8e8ba;
+  --accent: #737373;
+  --background-accent: #737373;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);