High-converting webinar registration SALES PAGE. Norwegian (Bokmål). This is NOT just a registration form — this is a SALES PAGE that must convince visitors to sign up. It must have premium animations, background effects, layered visual depth, and multiple conversion points. Design quality: as if someone paid $1,000,000 for it. ═══ BRAND ═══ Brand: "FørsteGangsLeder-Programmet" Page background: #F4FAFB (this is a LIGHT background). Accent color: #2A8F9B (for CTA buttons, icons, highlights). Hover: #1E7682. CRITICAL: The background is LIGHT. ALL headings MUST be dark (#1A1A2E or darker). ALL body text MUST be dark (#1A1A2E). ALL labels MUST be visible dark text. DO NOT use white or light-colored text anywhere on the page except inside accent-colored CTA buttons. Countdown timer boxes should use accent color (#2A8F9B) with white numbers inside. Font: Montserrat (import from Google Fonts: https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap). Logo: <img src="https://cyvc7pzgvcm273rx.public.blob.vercel-storage.com/brands/forstegangsleder_programmet/logo-dark.png" /> — position top-left, height 40-48px. ═══ CTA STRATEGY (CRITICAL — every CTA must feel URGENT and SPECIFIC) ═══ - NEVER use generic CTA text. Every button MUST contain a concrete benefit or urgency trigger. - CTA buttons must be LARGE (min height 56px, bold text, full-width on mobile), accent background, white text, box-shadow glow, hover scale effect. - VARY the CTA text across the page — do NOT repeat the same text on every button: • Hero CTA: "Ja, jeg vil bli en tryggere leder" — large with pulsing glow animation • After problem: "Se løsningen — meld deg på gratis webinar →" • After benefits: "Ja, jeg vil lære dette → Meld meg på gratis" • After testimonials: "Bli med dem — reserver din plass nå" • After bonus: "Ja, send meg bonusen + meld meg på gratis →" — BIGGEST button on the page • Urgency section: "Siste sjanse — kun begrenset antall plasser igjen →" • Form submit: "Ja, jeg vil bli en tryggere leder" • Sticky mobile: "Gratis plass →" - Every CTA must smooth-scroll to the registration form on click. ═══ PAGE STRUCTURE (follow this EXACT section order) ═══ SECTION 1 — HERO (above the fold) - Background: Rich layered effect using CSS — radial gradients, subtle animated grain/noise, or geometric shapes in brand colors. NOT flat. - Countdown timer to webinar date: 15. april 2026, 19:00 CET CET — days, hours, minutes, seconds. Bold numbers in accent-colored boxes. - Headline: "Bli en trygg og tydelig leder fra dag én" — large (text-4xl md:text-6xl), bold. This is the hook. - Subheadline: "Et konkret rammeverk som gjør deg til den lederen teamet ditt trenger – uten at du må finne opp kruttet på nytt" — text-lg md:text-xl, muted color. - HERO CTA BUTTON: "Ja, jeg vil bli en tryggere leder" — LARGE (text-xl, py-5 px-10), accent bg, white bold text, animated pulsing glow (box-shadow animation), hover: scale(1.05). IMPOSSIBLE to miss. - Below CTA: "✅ 100% gratis · 🔒 Begrenset antall plasser · ⏱️ 15. april 2026" SECTION 2 — REGISTRATION FORM (immediately after hero — user should see it without scrolling far!) - Compact card with contrasting background, thin accent border, subtle backdrop blur. - "🔒 Sikre din plass — det tar 30 sekunder" label above form. - Fields: Fornavn, Etternavn, E-post, Telefon. All required. Compact layout (2 columns on desktop). - Input styling: appropriate contrast, accent focus ring, rounded corners. - Submit button: FULL WIDTH, accent bg, text-lg, bold "Ja, jeg vil bli en tryggere leder". Hover: scale + shadow. - Below form: "🔒 Vi deler aldri din informasjon." + "🎁 Bonus: Du får 2 gratis ressurser etter påmelding." SECTION 3 — PROBLEM AGITATION - Background: slightly different shade (bg2 or surface) for visual separation. - Problem text: "Du har akkurat blitt leder. Plutselig skal du lede kollegaene dine, håndtere vanskelige samtaler, og ta beslutninger som påvirker hele teamet. Men ingen har fortalt deg *hvordan*. De fleste nye ledere bruker måneder – ofte år – på å finne ut av ledelse gjennom prøving og feiling. Du går hjem fra jobb og lurer på: *Gjorde jeg dette riktig? Hvorfor respekterer de meg ikke? Hvordan skal jeg håndtere denne konflikten?* Resultatet? Du blir usikker, teamet merker det, og du mister verdifull tid på å lære gjennom smertefulle feil." — empathetic, concrete description of the pain. - Icon or visual element (CSS-only). Maybe subtle red/warning accent. - CTA BUTTON: "Se løsningen — meld deg på gratis webinar →" (accent, full-width on mobile, scrolls to form) SECTION 4 — SOLUTION / WHAT YOU'LL LEARN - Solution text: "**Ny Som Leder** gir deg det systemet du trenger for å lykkes fra første dag. Dette er ikke teori fra en lærebok. Det er et praktisk, gjennomprøvd rammeverk som tar deg gjennom de 90 første kritiske dagene som leder – steg for steg. Du får konkrete verktøy for de situasjonene du møter hver eneste dag: Hvordan du bygger tillit med teamet, hvordan du har vanskelige samtaler, hvordan du setter klare forventninger, og hvordan du tar beslutninger teamet står bak. Med **Ny Som Leder** slipper du å bruke månedsvis på usikkerhet. Du får et system som fungerer – fra dag én." - Benefits list (with checkmark icons in accent color): 1. "**De 90 første dagene**: En trinn-for-trinn plan for hva du skal gjøre når, så du bygger tillit og kredibilitet raskt" 2. "**Vanskelige samtaler**: Konkrete maler og formuleringer for tilbakemeldinger, konflikter og forventningsavklaringer" 3. "**Fra kollega til leder**: Hvordan du navigerer den vanskelige overgangen uten å miste relasjoner eller respekt" 4. "**Beslutningsrammeverk**: Enkle verktøy som hjelper deg ta klare beslutninger teamet forstår og støtter" 5. "**Ukentlige lederhandlinger**: Spesifikke tiltak du kan implementere med en gang for å skape resultater" 6. "**Delegering som fungerer**: Slik gir du fra deg oppgaver uten at kvaliteten lider eller at du må følge opp hele tiden" - Each bullet = mini-promise. Accent-colored checkmarks or icons. - CTA BUTTON: "Ja, jeg vil lære dette → Meld meg på gratis" — full-width, accent bg, bold. Scrolls to form. SECTION 5 — SOCIAL PROOF / TESTIMONIALS - Testimonial cards with quote marks, name, role. Border or subtle background. - CTA BUTTON: "Bli med dem — reserver din gratisplass nå →" (accent, prominent, scrolls to form) SECTION 6 — EXCLUSIVE REGISTRATION BONUS (this is THE key conversion driver — make it UNMISSABLE!) - This section must be the MOST visually striking on the entire page. Like opening a premium gift box. - Background: COMPLETELY different from the rest. Bold accent-colored (#2A8F9B) gradient, or large accent-bordered card with glowing edges. MUST break the visual pattern — a visitor scrolling should think "wait, what's THIS?" - Animated entrance: fade-in-up with slight bounce or scale effect. - Top badge: "🎁 EKSKLUSIV REGISTRERINGSBONUS" — pill/tag in accent color, slightly above the card. - Heading: "Meld deg på i dag — og få dette helt gratis" — text-3xl md:text-4xl, bold, high contrast. - Subheading: "Alle som registrerer seg til webinaret får disse eksklusive ressursene tilsendt umiddelbart:" - Show bonus items as LARGE, visually rich cards side-by-side (stacked on mobile). Each card has: • Prominent icon (🎯📄📧🎓) — 48px+, accent-colored • Bold title (text-xl) • 2-line description of concrete value • Subtle accent border or shadow to feel tangible Card 1: Title: "Gratis PDF-guide" / Description: "Praktiske tips og strategier du kan bruke umiddelbart." Card 2: Title: "Eksklusiv e-postguide" / Description: "En steg-for-steg plan du får rett i innboksen." - Below cards: accent-tinted box: "💡 Bonusen sendes til e-posten din umiddelbart etter påmelding. Helt gratis — ingen forpliktelser." - CTA BUTTON (BIGGEST on entire page): "Ja, gi meg bonusen + meld meg på gratis →" — text-xl, py-6, full-width, accent bg, white bold text, animated glow/pulse, rounded-xl. Below: "Det tar under 30 sekunder." SECTION 7 — URGENCY + FINAL CTA - Urgency text: "De første 90 dagene definerer lederkarrieren din. Jo før du får et system på plass, jo raskere bygger du troverdighet og resultater." — accent color, clock icon. - Repeat countdown timer (smaller). - "Plasser fylles opp raskt" + visual indicator (progress bar at ~78%). - CTA BUTTON: "Siste sjanse — kun begrenset antall plasser igjen →" — large, accent, urgency animation. Scrolls to form. SECTION 8 — STICKY MOBILE CTA - Mobile: sticky bottom bar (position: fixed, bottom: 0, z-50), accent bg, bold CTA "Gratis plass →" always visible. - Desktop: on scroll past hero, slim top bar with countdown + CTA. SECTION 10 — FOOTER - Minimal: brand name, "© 2026 FørsteGangsLeder-Programmet. Alle rettigheter reservert." - Final CTA link: "Scroll opp og meld deg på →" ═══ DESIGN RULES ═══ - MINIMUM 8 distinct CTA buttons/links spread across the page. Every section MUST end with a visible, clickable CTA. A visitor should NEVER scroll a full viewport without seeing a CTA. - CTA buttons: LARGE and prominent — not subtle links. Min height 48px, bold text, full accent background. - Staggered entrance animations (CSS @keyframes + animation-delay) on each section. - Intersection Observer for scroll-triggered animations. - Background: DEPTH — layered gradients, subtle patterns, geometric decorations. Not flat. - Premium event landing page feel — not a generic template. - Mobile-first responsive. Premium on phone. - Webinar: "Bli en trygg og tydelig leder fra dag én" — 15. april 2026, 19:00 CET CET. FREE. - Registration form easily accessible — never far to scroll. CRITICAL — COPY: All text MUST read as if a human copywriter wrote it by hand. 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". Write direct, concrete, warm but grounded — like a senior advisor over coffee. CRITICAL — NO AI TELLS (these are dead giveaways that AI built the page): 1. NO gradient text on headings (no linear-gradient + WebkitBackgroundClip + WebkitTextFillColor). All headings = solid white (#FFFFFF). 2. NO generator: 'v0.app' in metadata. Remove it entirely. 3. NO animated SVG checkmark with stroke-draw animation on success screen. Use a simple static icon. 4. NO bounce easing cubic-bezier(0.34, 1.56, 0.64, 1) on everything. Use varied, natural easings: ease-out for entrances, ease-in-out for transitions. No spring physics. 5. NO text-balance or text-pretty CSS utilities. 6. NO generic code comments like {/* Hero Content */}, {/* Glass Card */}, {/* Animated Checkmark */}. 7. NO "Takk!" as success heading. Use the exact text specified. 8. Transitions should feel natural and understated, not bouncy or robotic.
Now let me build all the components and the page.
Now let me build everything — layout, globals, and all components:
Now let me create all the page components:
Now let me write the main page:
Now let me also add "use client" to the sections that use event handlers, since they are Server Components by default in Next.js App Router:
Also add "use client" to page.tsx since it has an inline onClick:
Now let me fix the JSX.IntrinsicElements reference in ScrollAnimator which will error in newer TS/React setups:
Now let me also update the globals.css @theme inline block to properly set the Montserrat font, since it's loaded via next/font:
The page is complete. Here's a summary of what was built:
8 sections, 9+ distinct CTAs, all in Norwegian Bokmål:
All headings are dark #1A1A2E, no gradient text, no AI tells, Montserrat throughout, scroll-triggered entrance animations via IntersectionObserver.