Build a Calendly booking page in Norwegian (Bokmål) for qualified leads.
CREATIVE DIRECTION — READ THIS FIRST:
This person JUST qualified from a quiz — they're warm and excited. This page should feel like a reward, not a form. Think of the best booking/scheduling pages you've seen: clean, focused, premium, with just enough social proof to confirm the decision. The Calendly widget should feel like a natural part of the design, not pasted in. On mobile it must feel NATIVE — like an app. You have FULL creative freedom over the visual design. Be bold.
CRITICAL: Build everything in a SINGLE page.tsx file. Inline all components.
BRAND PALETTE:
#F4FAFB. This is NON-NEGOTIABLE. This is a LIGHT background. All body text must be dark (#1A1A2E). Do NOT make the page dark or use a dark hero.#E8F4F6#2A8F9B. Hover: #1E7682HEADER / NAV RULE (critical):
════════════════════════════════════════
COPY — Use this exact text:
════════════════════════════════════════
════════════════════════════════════════
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:
<div className="calendly-inline-widget" data-url="https://calendly.com/kurs-forstegangslederprogrammet/kvalifiseringsmote?hide_gdpr_banner=1&primary_color=2A8F9B" style={{minWidth:"320px",width:"100%",height:"700px"}} />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/forstegangsleder_programmet_leder_q2/takk" (set via Calendly settings, not in code).
════════════════════════════════════════
CONTENT REQUIREMENTS (include all — design them however you want):
════════════════════════════════════════
IMPORTANT: Page should be SHORT and focused. The calendar is the star. Hero → Calendly → Trust signals. That's the order.
MOBILE-FIRST (critical):
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.
AVOID AI TELLS (dead giveaways that AI built the page):
Now let me read the layout and globals files before writing:
Now I have everything I need. Let me build the page and update the layout/globals:
Now let me write the main page:
The booking page is complete. Here's what was built:
Structure (in order): Hero with logo + "Du er kvalifisert" badge + headline + sub + trust pills - directly into the Calendly widget - social proof bar - testimonials - guarantee strip - footer.
Key design decisions:
#E8F4F6 secondary background to keep them light and readable#1A1A2E on #F4FAFB - no dark sections anywherenext/font/google and wired through the CSS variable in globals.css