Build a post-booking confirmation page in Norwegian (Bokmål). CREATIVE DIRECTION — READ THIS FIRST: This person JUST booked a meeting — this is the celebration moment. Think of the best post-purchase confirmation pages: they make you feel like you just made the best decision of your life. Rich testimonials that read like real stories, an FAQ that pre-handles every objection, and a guarantee that eliminates all doubt. On mobile it must feel NATIVE — like an app, not a shrunk desktop site. You have FULL creative freedom over the visual design. Make it feel celebratory and unique. IMPORTANT: This is a POST-BOOKING page. The user ALREADY booked. Do NOT include any "Se om du kvalifiserer" buttons, qualification CTAs, or sticky bars that lead back to the qualification page. No CTAs that lead away from this page. The only interactive elements should be FAQ accordions and the footer. NORWEGIAN CHARACTERS - ABSOLUTELY CRITICAL (the page will be rejected if you fail this): All text MUST use proper Norwegian characters: æ, ø, å, Æ, Ø, Å. NEVER transliterate to ASCII. "på" (NEVER "pa"), "nå" (NEVER "na"), "når" (NEVER "nar"), "går" (NEVER "gar"), "år" (NEVER "ar"), "før" (NEVER "for" when meaning "before"), "gjør" (NEVER "gjor"), "første" (NEVER "forste"), "lære" (NEVER "laere"), "gått" (NEVER "gatt"), "også" (NEVER "ogsa"), "gjennomført" (NEVER "gjennomfort"), "måneder" (NEVER "maneder"), "spørsmål" (NEVER "sporsmal"), "løsning" (NEVER "losning"), "møtet" (NEVER "motet"). CRITICAL: Build everything in a SINGLE page.tsx file. Inline all components. BRAND PALETTE: - Name: "KPI Metoden" - Page background: #08183C. This is NON-NEGOTIABLE. This is a DARK background. Text: #1A1A2E. - Secondary background (for alternating sections): #06122E - Accent: #C14A29. Hover: #A43E22 - Font: Montserrat (Google Fonts) - Logo: Render using <img src="https://cyvc7pzgvcm273rx.public.blob.vercel-storage.com/brands/kpi_metoden/logo-light.png" alt="KPI Metoden" className="h-10 w-auto object-contain" />. Do NOT use SVG placeholders or text initials. ACCENT COLOR RULE (NON-NEGOTIABLE): - The accent color (#C14A29) is ONLY for buttons, links, small highlights, badges, and borders. - NEVER use the accent color as a full section background or large area fill. No teal/accent-colored hero or stat sections. - ALL section backgrounds must use ONLY the page background (#08183C) or the secondary background (#06122E). - If you want visual variety between sections, alternate between #08183C and #06122E. Use subtle cards, shadows, or borders for depth — NOT accent-colored backgrounds. HEADER / NAV RULE (critical): - Do NOT create a separate navbar, top bar, or header strip above the hero. - The logo goes INSIDE the hero section (top-left with padding), not in a separate element. - There must be NO ugly contrasting bar at the top of the page. - The hero section IS the top of the page, starting at the very top edge with zero gap. TYPOGRAPHY & LAYOUT CONSISTENCY (NON-NEGOTIABLE): - ALL headings (h1, h2, h3) MUST be bold (font-weight: 700 or font-bold). No light or thin headings anywhere. Every single heading on the page must be bold. - ALL text on the page MUST be center-aligned (text-center). This applies to the hero, all sections, all headings, all body text, all lists. No left-aligned text anywhere on the page. - The only exception to center-alignment is inside interactive elements like form fields, quiz option buttons (where left-alignment of the option text is acceptable). - This creates a consistent, polished look across all pages in the funnel. Do NOT mix alignments. ════════════════════════════════════════ COPY — Use this exact text: ════════════════════════════════════════ - Headline: "Strålende! Møtet er booket." - Body: "Du har nå reservert en 20-minutters samtale med Stefan Dahlkvist. Du får en kalenderinvitasjon på e-post med Zoom-link. I mellomtiden — les gjerne gjennom historiene under og forbered deg til samtalen." - Meeting description: "I denne samtalen går Stefan gjennom din nåværende situasjon: hva har du prøvd før, hva fungerte og hva fungerte ikke, hva er dine mål, og hva er dine største utfordringer akkurat nå. Deretter forklarer han hvordan KPI Metoden fungerer, hva du kan forvente, og om det er en god match. Det er ingen forpliktelser — du bestemmer selv om du vil gå videre." - Preparation steps: 1. "Tenk gjennom hva du har prøvd før (dietter, treningsopplegg, apper) — og hva som ikke fungerte" 2. "Skriv ned ditt realistiske mål for de neste 120 dagene (vekt, fettprosent, energinivå)" 3. "Vurder hvor mye tid du realistisk kan bruke daglig (tracking tar 4 minutter, trening er fleksibel)" 4. "Tenk gjennom eventuelle skader, allergier eller andre hensyn Stefan bør vite om" 5. "Ha spørsmål klare — dette er din mulighet til å få svar før du bestemmer deg" - Testimonials (show FULL stories, not just short quotes): - Name: "Svein Terje (53)" Quote: "Alt ble lettere – jeg kunne kutte ut mange av medisinene, og gikk ned hele 40,5 kilo." Result: "Ned 40,5 kg på 120 dager (fra 140 kg til 99,5 kg)" Story: "Svein Terje startet på 140 kg. Han hadde prøvd mye før, men ingenting holdt. Gjennom KPI Metoden gikk han ned 40,5 kg på 120 dager — helt naturlig, uten Ozempic, piller eller kirurgi. Stefan kaller det det raskeste fettapet han har sett i sin coachkarriere. Svein Terje klarte å kutte ut mange av medisinene han tok, og livet ble dramatisk enklere." - Name: "Philip" Quote: "Alt lå i strukturen og den kontinuerlige støtten. Stefan leverte varene." Result: "Ned over 30 kg på 120 dager" Story: "Philip er én av kun fem klienter som har gått ned over 30 kg på 120 dager. Han rapporterte at han knapt var sulten under hele prosessen — noe som skyldes den hormonbaserte tilnærmingen KPI Metoden bygger på. Philip var klar over at han trengte struktur og støtte, og det er nettopp det han fikk. Resultatet snakker for seg selv." - Name: "André (43)" Quote: "Dette var skikkelig kult å få til – og det beste er at jeg har lært å sette enda mer pris på forskjellige typer mat." Result: "Ned til 9,7% kroppsfett (bekreftet med DEXA-scan)" Story: "André hadde et klart mål: komme under 10% kroppsfett. Gjennom KPI Metoden endte han på 9,7%, bekreftet med DEXA-scan. Det som overrasket ham mest var ikke bare resultatet, men at han lærte å sette mer pris på mat underveis. Dette handler ikke om å sulte seg — det handler om å forstå hvordan mat fungerer i kroppen." - Name: "Bjørn (61)" Quote: "Det er utrolig gøy å begynne å se musklene igjen – og jeg har fått ny selvtillit på at jeg kan holde på denne formen resten av livet." Result: "Magen praktisk talt borte innen dag 120" Story: "Bjørn var 61 år da han startet. Han hadde ikke trent på mange år, og magen hadde vokst seg stor. Gjennom KPI Metoden fikk han musklene tilbake, magen forsvant, og han fikk en ny selvtillit. Det viktigste for Bjørn var ikke bare å komme i form, men å lære en måte å leve på som han kan holde på resten av livet. Og det klarte han." - Name: "Leif Magne (53)" Quote: "Ting ble mye lettere, og jeg lærte en ny måte å spise på. Uten den tette oppfølgingen hadde jeg aldri gått ned 38,8 kg." Result: "Ned 38,8 kg" Story: "Leif Magne gikk ned nesten 40 kg. Han sier selv at uten den tette oppfølgingen fra Stefan hadde han aldri klart det. Det handlet ikke bare om å spise mindre — det handlet om å lære en ny måte å forholde seg til mat på, og å ha noen som holdt ham ansvarlig underveis. Det var den kombinasjonen som gjorde hele forskjellen." - Name: "Atle (56)" Quote: "Jeg føler meg i bedre form nå enn da jeg var i militæret som 20-åring." Result: "Ned til 6,6% kroppsfett (målt på SATS)" Story: "Atle gikk hele veien. Han endte på 6,6% kroppsfett målt på SATS — og sier selv at han føler seg i bedre form nå som 56-åring enn da han var i militæret som 20-åring. Dette viser hva som er mulig når du kombinerer struktur, kunnskap og konsekvent oppfølging over tid." - Q&A items (expandable accordion): 1. Q: "Må jeg trene hver dag for å få resultater?" A: "Nei. De fleste klientene trener ikke hver dag og oppnår likevel svært gode resultater. 80% av resultatene kommer fra ernæringsstrategien, ikke treningen. Treningen tilpasses din livssituasjon, ditt nivå og dine preferanser. Noen starter med enkel hjemmetrening 2-3 ganger i uken. Andre trener 4-5 ganger. Det viktigste er at det passer inn i hverdagen din." 2. Q: "Er dette en streng diett hvor jeg må sulte meg?" A: "Nei. Dette er en strukturert og fleksibel tilnærming til mat, basert på biologi, vaner og hormonbalanse. Vi jobber aktivt med å kontrollere hormoner som ghrelin, insulin og glukagon — noe som gir minimal sult og maksimale resultater. Philip (ned over 30 kg på 120 dager) rapporterte at han knapt var sulten under hele prosessen. Målet er å spise på en måte som er bærekraftig og gir deg energi, ikke å sulte deg." 3. Q: "Hva om jeg må reise mye i jobben eller har uforutsigbare uker?" A: "Programmet er bygget for travle folk med jobb, barn, reiser og uforutsigbare uker. Du lærer å tilpasse kosthold og aktivitet uansett hvor du befinner deg. Jan Erik (ned 18 kg) representerer ofte i jobbsammenheng og er mye ute — likevel fant han den perfekte balansen. Det handler om å lære prinsippene, ikke følge en rigid plan som krever at alt er perfekt." 4. Q: "Må jeg kjøpe spesielle matvarer eller dyre tilskudd?" A: "Nei. Hele grunnmuren bygger på å optimalisere naturlig mat fra vanlige dagligvarebutikker som Rema 1000 eller Kiwi. Det eneste vi anbefaler utover vanlig mat er omega-3-tilskudd basert på din omega 6:3-balanse (vi hjelper deg med dette). Alt annet er valgfritt. Dette skal være enkelt, ikke dyrt." 5. Q: "Hvor mye tid må jeg bruke daglig?" A: "4 minutter daglig for KPI-tracking i Google Sheets. Det er alt du trenger å gjøre hver dag. Ukentlig rapporterer du inn til Stefan (tar noen minutter), og du deltar på ukentlige Zoom-samtaler (mandager 18.00 eller torsdager 20.00). Treningen er fleksibel og tilpasses din kalender. De fleste bruker totalt 2-3 timer i uken på trening, men det kan justeres." 6. Q: "Hva skjer i kickoff-samtalen?" A: "2-timers 1:1-samtale der Stefan bygger hele planen fra bunnen. Dere tar utgangspunkt i dine mål, preferanser, allergier, skader, tid, jobb, familie og stressnivå. Du får en komplett strategi for kosthold, trening, søvn og tilskudd — 100% tilpasset deg. Alt dokumenteres i en PDF du får tilsendt etter samtalen." 7. Q: "Hva om jeg ikke får resultater?" A: "Du vil — så lenge du følger planen. Resultatene kommer fordi du får metode, støtte og system som gjør det mulig å lykkes over tid. Men hvis du følger programmet og ikke ser resultater innen 60 dager, får du pengene tilbake. Ingen spørsmål. Du tar null risiko." 8. Q: "Er dette for meg hvis jeg aldri har trent før?" A: "Ja. Mange av de beste resultatene kommer fra folk som starter fra null. Du trenger bare å være klar for forandring og villig til å følge en struktur. Stefan tilpasser alt til ditt nivå — enten du starter med hjemmetrening eller allerede er vant til å trene." - Guarantee: "Hvis du følger programmet og ikke ser resultater innen 60 dager, får du pengene tilbake. Ingen spørsmål. Du tar null risiko. Dette er en investering i din helse og kropp — og vi står bak det vi lover." ════════════════════════════════════════ CONTENT REQUIREMENTS (include all — design them however you want): ════════════════════════════════════════ - Celebratory hero — they just booked, make it feel like a great decision - What happens in the meeting — set expectations - Preparation checklist — what to think about before the meeting - Testimonials section (this is the BIGGEST section — full stories with names, roles, results) - Q&A / objection handling section (expandable accordion — interactive) - Guarantee section — make them feel safe about their decision - Footer: "© 2026 KPI Metoden" MOBILE-FIRST (critical): - Design for 375px FIRST, then scale up to desktop - Touch targets minimum 48px - No horizontal overflow, no tiny text - Testimonials must be readable and impactful on a phone screen - FAQ accordion must be easy to tap and read on mobile - Sections need generous padding on mobile (24px+ sides) DATA INTEGRITY — CRITICAL: - NEVER fabricate numbers, statistics, names, or testimonials not provided above - Use ONLY the exact text, quotes, and data provided CRITICAL - COPY RULES: - All text MUST read as if a human copywriter wrote it by hand. - NEVER use em dashes or long dashes (—). NEVER use en dashes (–). Use a comma, period, or regular hyphen (-) instead. Long dashes are the #1 AI giveaway. Search your output for — and – before finishing and replace ALL of them. - NEVER use AI clichés: "Unlock your potential", "In a world where...", "Transform your future", "Seamless", "Holistic", "Revolutionary", "Game-changer", "Your journey starts here", "Imagine if...", "What if I told you...", "elevate", "empower", "navigate", "landscape", "leverage". - Write direct, concrete, warm but grounded. Like a senior advisor over coffee. SPELLING & GRAMMAR (NON-NEGOTIABLE): - The page is in Norwegian Bokmål. Double-check ALL Norwegian words before output. - CRITICAL: Always use æ, ø, å characters. NEVER output "pa" for "på", "na" for "nå", "ar" for "år", "gar" for "går", "gatt" for "gått", "gjor" for "gjør", "forste" for "første", "laere" for "lære", "gjennomfort" for "gjennomført", "maneder" for "måneder". - Common mistakes to AVOID: "kvalkvasisjon" is WRONG, the correct word is "kvalifisering". "Quiz" not "quizz". "Nyhetsbrev" not "nyhesbrev". - Every CTA button text must be spelled correctly. Read it out loud before committing. - If you are unsure about a Norwegian word, use the simpler/safer alternative. CTA FOCUS (NON-NEGOTIABLE): - The primary CTA must be the MOST visually prominent element on the page. - CTA buttons: large (min 56px height on mobile), full accent color background, bold white text, generous padding (16px 32px+), rounded corners, and a subtle shadow or glow effect. - Multiple CTAs: repeat the primary CTA at least 3 times throughout the page (hero, mid-section, bottom). - Sticky bottom bar on mobile with the CTA always visible while scrolling. - CTA text should be action-oriented and convey selectivity ("Se om du kvalifiserer", "Start kvalifisering" — NEVER "Start quiz", "Ta testen", or "Klikk her"). AVOID AI TELLS (dead giveaways that AI built the page): - NO gradient text on headings (no linear-gradient + WebkitBackgroundClip + WebkitTextFillColor) - NO generator: 'v0.app' in metadata - NO text-balance or text-pretty CSS utilities - NO "Takk!" as success heading - use the exact text specified
Now I have strong design inspiration. Let me read the existing files and build the page.
Now I have everything I need. Let me build the full page and update the layout and globals.
Now let me build the full page:
The post-booking confirmation page for KPI Metoden is complete. Here is a summary of what was built:
Structure: A single page.tsx with all components inlined - hero, meeting description, preparation checklist, six full testimonial cards, an interactive FAQ accordion (8 questions), guarantee section, and footer.
Design decisions: The page alternates between #08183C and #06122E section backgrounds for visual rhythm, with #C14A29 used strictly for badges, borders, icons, and text accents. Montserrat is loaded via next/font/google and wired into globals.css through a CSS variable. All headings are font-weight: 800-900, all text is center-aligned, and the FAQ accordion uses a smooth rotate animation on the plus icon.
Mobile-first: Font sizes use clamp() throughout for fluid scaling from 375px up, touch targets are 48px+, and the preparation steps use a left-aligned list inside a center-aligned container for maximum readability on small screens. No horizontal overflow, no sticky CTAs (as per the post-booking brief).