Build a Calendly booking page in Norwegian (Bokmål) for qualified leads. CREATIVE DIRECTION — READ THIS FIRST: This person just qualified through the qualification process. They're warm and ready to take the next step. The page should feel clean, professional, and frictionless — get them to the calendar fast. No over-the-top celebration, no "you earned this" language. Just confirm they're a good fit and let them book. Think of the best booking pages from premium consulting firms: focused, confident, calm. The Calendly widget should feel like a natural part of the design. On mobile it must feel NATIVE. You have FULL creative freedom. Be bold. 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"). 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: "Du kvalifiserer. Book en uforpliktende samtale." - Sub: "I denne 20-minutters samtalen går vi gjennom dine mål, utfordringer og ser om KPI Metoden passer for deg. Ingen press, ingen salg — bare en ærlig vurdering." - Trust signals: "Helt uforpliktende. Hvis vi ikke tror vi kan hjelpe deg, sier vi det rett ut." · "20 minutter" · "Ingen forpliktelser — vi tar en ærlig prat" - Testimonials: "Alt ble lettere – jeg kunne kutte ut mange av medisinene, og gikk ned hele 40,5 kilo." — Svein Terje (Ned 40,5 kg på 120 dager (fra 140 kg til 99,5 kg)) "Det aller beste var den ekstra energien og humøret som kom tilbake – og at jeg endelig fikk ekte resultater av treningen." — Morten (Mer energi og bedre humør innen 120 dager) - Guarantee: "Helt uforpliktende. Hvis vi ikke tror vi kan hjelpe deg, sier vi det rett ut." - Social proof: "Hundrevis av norske menn har startet akkurat her. De fleste beskriver samtalen som «overraskende konkret og ærlig»." ════════════════════════════════════════ CALENDLY EMBED (functional requirement — use this EXACT React pattern): ════════════════════════════════════════ This is a Next.js "use client" page. Load the Calendly script via useEffect: useEffect(() => { const script = document.createElement("script"); script.src = "https://assets.calendly.com/assets/external/widget.js"; script.async = true; document.head.appendChild(script); return () => { document.head.removeChild(script); }; }, []); In JSX, render the Calendly widget inside a white card that pops from the dark background: The Calendly section MUST break out of any narrow page container so the white card can be 1100px wide. Wrap it like this: <section style={{width:"100vw",maxWidth:"100vw",marginLeft:"calc(-50vw + 50%)",padding:"0 24px",boxSizing:"border-box"}}> <div style={{background:"#FFFFFF",borderRadius:"12px",padding:0,maxWidth:"1100px",margin:"0 auto",boxShadow:"0 8px 32px rgba(0,0,0,0.3)",overflow:"hidden"}}> <div className="calendly-inline-widget" data-url="https://calendly.com/kurs-kpimetoden/kvalifiseringsmote?hide_gdpr_banner=1&primary_color=C14A29" style={{width:"100%",height:"700px",border:"none",margin:0,padding:0}} /> </div> </section> CRITICAL CALENDLY STYLING: - The white card MUST be max-width: 1100px (NOT 900px, NOT 768px). Calendly needs >1000px width to show its SIDE-BY-SIDE layout (event info left, calendar right). This is the REQUIRED layout. - The outer section uses width: 100vw + margin-left: calc(-50vw + 50%) to break out of any narrow parent container. - White (#FFFFFF) card with border-radius: 12px, box-shadow, overflow: hidden, padding: 0. - Calendly fills the card edge-to-edge — no extra whitespace inside the card. - Do NOT add background_color or text_color URL params — Calendly's default white theme is correct. - Do NOT add a redundant heading — Calendly shows its own "Select a Date & Time". Do NOT use <script> tags in JSX. Do NOT use dangerouslySetInnerHTML. Use the useEffect pattern above. After booking, Calendly redirects to: "https://leadsuccesses.vercel.app/f/kpi_metoden_meta_q2/takk" (set via Calendly settings, not in code). ════════════════════════════════════════ PAGE LAYOUT — THIS ORDER IS NON-NEGOTIABLE: ════════════════════════════════════════ 1. HERO (single visual block — all inside one section, keep SHORT): - Headline ("Du kvalifiserer..." — 1 line) - Trust signal badges ("Uforpliktende" · "20 minutter" · "Ingen kredittkort") — one line - Trustpilot rating (compact: 5 green stars #00B67A + score + "XX anmeldelser", one line, ~32px height. Show: 4.9/5 — 47 anmeldelser) - Personal video IMMEDIATELY after badges placeholder (dark surface, 16:9, max-width 700px, play icon accent color, text: "Personlig melding fra KPI Metoden — kommer snart"). NO separate heading — just the video inside the hero. The video is the 4th element in hero. CRITICAL: NO extra paragraphs, explanatory text, or subheadings between the trust badges and video, or between video and the end of hero. The hero is: Headline → Badges → Trustpilot → Video. That's it. Keep compact. 2. CALENDLY WIDGET: IMMEDIATELY after hero. NO extra sections, paragraphs, or text between hero and Calendly. NOTHING like "Vi går gjennom din situasjon...", "Velg en tid som passer deg", "Ingen forpliktelser..." — ALL of that is FORBIDDEN between hero and Calendly. The Calendly embed appears DIRECTLY after the hero section closes. 3. Trust signals: testimonials and/or guarantee BELOW the calendar 4. Footer: "© 2026 KPI Metoden" CRITICAL: The Calendly calendar is the STAR of this page. Hero (compact: headline + badges + video) → Calendly → Trust. Keep the hero EXTREMELY SHORT so the calendar appears fast. NO extra content between hero and Calendly. MOBILE-FIRST (critical): - Design for 375px FIRST, then scale up to desktop - Touch targets minimum 48px - No horizontal overflow, no tiny text - Calendly widget must be full-width with adequate height (700px+) on all screen sizes - Sections need generous padding on mobile (24px+ sides) DATA INTEGRITY — CRITICAL: - NEVER fabricate numbers, statistics, or data not provided above - Use ONLY the exact text and testimonials 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 NORWEGIAN ENCODING IN HTML <title> AND <meta> TAGS (CRITICAL): The <title> tag and ALL meta tags (og:title, og:description, twitter:title, twitter:description) MUST use proper Norwegian characters æ, ø, å, Æ, Ø, Å. WRONG: <title>KPI Metoden - Ned 10-15 kg fett pa 120 dager</title> RIGHT: <title>KPI Metoden - Ned 10-15 kg fett på 120 dager</title> WRONG: <meta property="og:description" content="Finn ut om du kvalifiserer for var metode" /> RIGHT: <meta property="og:description" content="Finn ut om du kvalifiserer for vår metode" /> Check EVERY string literal in the HEAD section for missing æ, ø, å characters. FINAL CHECK — BEFORE OUTPUTTING CODE: Search your ENTIRE output for these ASCII sequences that indicate missing Norwegian characters: - " pa " or "pa " at word boundaries → should be " på " / "på " (most common error) - " na " or "na " → should be " nå " / "nå " - "gar " or " gar" → should be "går " / " går" - "ar " in age/year context → should be "år " - "for " when meaning "before" → should be "før " - "gjor" → should be "gjør" - "forste" → should be "første" - "laere" → should be "lære" - "ogsa" → should be "også" - "losning" → should be "løsning" - "sporsmal" → should be "spørsmål" - "maneder" → should be "måneder" - "motet" → should be "møtet" If you find ANY of these patterns in your output, fix them before returning the code.
Now let me build the page with careful attention to every specification.
Now let me write the full page:
Now let me do a final self-check by reading the file and verifying all Norwegian characters are correct:
All Norwegian characters verified: på, går, ærlig, nå, uforpliktende all present and correct. No ASCII transliterations found. No em dashes present (all replaced with hyphens). No AI clichés. Layout order correct: Hero (logo + headline + badges + Trustpilot + video) → Calendly → Trust/testimonials → Footer.
The page is built as a single page.tsx with everything inlined. Here is a summary of what was delivered:
Structure: Hero (logo flush to top, bold headline, 3 trust badges, Trustpilot 4.9/5, video placeholder) flows directly into the 1100px-wide Calendly white card, then into the trust/testimonial section below.
Calendly embed uses the exact useEffect script-loading pattern with data-url pointing to the correct Calendly URL with primary_color=C14A29 and the 700px height card breaking out of the container via calc(-50vw + 50%).
Mobile UX: A fixed sticky CTA bar (md:hidden) sits at the bottom of the screen with a full-width accent button, safe-area padding for iPhones, and a backdrop blur - making it feel completely native on mobile.