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 — 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) SECTION 3 — 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. SECTION 4 — 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) SECTION 5 — 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 6 — 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. SECTION 7 — REGISTRATION FORM (the actual form) - Card with contrasting background, thin border, subtle backdrop blur. - "🔒 Trygg påmelding" label above form. - Fields: Fornavn, Etternavn, E-post, Telefon. All required. - 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 med andre." + "🎁 Du får bonusen tilsendt umiddelbart etter påmelding." 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 9 — 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 read the existing files and build the full page:
Now I have full context. Let me build the entire page — layout, globals, and all components:
Now let me build all the components and the main page:
Now let me create the main page with all sections:
Now let me review the page for any issues and refine the animations and details:
There's a conflict between className="animate-fade-up" (which applies opacity: 0 via CSS) and inline opacity: 0 with inline animation. Let me clean up the hero section to use only one animation approach, and also verify the globals handle this properly:
Now let me also fix the reveal-scale cards in the solution section that have inline opacity: 0 which conflicts with the class-based approach:
Now let me also update the scrollToForm footer button to be an <a> with href="#" to satisfy lint, and verify the bonus CTA button color override:
Now let me do a final read of the complete page to catch anything I missed:
The page looks complete and well-structured. Let me also add display: flex; justifyContent: center; on the countdown inside urgency section, and do a final check to make sure the CountdownTimer small renders inline properly — it already does, it returns a flex row. Everything looks solid. Let me also make a small improvement to the sticky nav — it currently uses a <div> for the bottom bar; let me wrap it in <nav> for semantics and also make the mobile bottom bar only visible when there's content:
Everything is in place. Here's a summary of what was built:
The full Norwegian webinar sales page is complete across 9 files: app/page.tsx, app/layout.tsx, app/globals.css, components/countdown-timer.tsx, components/sticky-nav.tsx, components/registration-form.tsx, and hooks/use-reveal.ts.
What's included:
IntersectionObserver (fade-up + scale-in) on all sections and benefit cardsnext/font/google, all headings dark #1A1A2E, no light text except inside accent buttons