Section Navigator

Here the tool:

Our Process

From initial research to final delivery.

Dossier

The foundation of any successful program.

Marketing

Compelling marketing initiatives.

Execution

Strategy transformed into results.

ccc

All Options Overview

1. Operational Modes

Mode	Class	Behavior
Scroll-All	(default)	User scrolls through all sections
Tabs	section-navigator-tabs	Click to switch content (no scroll)

2. Gradient Backgrounds (add to nav)

Gradient	Class
Teal → Aquamarine	gradient-smaragd-aquamarin
Coral → Prussian	gradient-aprikose-preussen
Sky → Cornflower	gradient-himmel-kornblume
Heather → Ruby	gradient-heide-rubin
Lavender → Prussian	gradient-flieder-preussen
Sea → Vermillion	gradient-meer-zinnober
Aquamarine → Lime	gradient-aquamarin-limette

3. Overlay Options (combine with gradient)

Overlay	Class
White uniform (40%)	basic-tabs-overlay-white
White center vignette	basic-tabs-overlay-white-center
Black uniform (40%)	basic-tabs-overlay-black
Dark center vignette	basic-tabs-overlay-center

4. Custom Background CSS Variables

Variable	Default	Usage
--section-navigator-bg	Light beige	Content area background
--section-navigator-header-bg	Light teal	Header area background

Example:

<section class="section-navigator" 
         style="--section-navigator-bg: #ffffff; --section-navigator-header-bg: transparent;">

5. Content Background Presets

Class	Background
section-navigator-bg-white	White
section-navigator-bg-gray	Gray
section-navigator-bg-transparent	Transparent

Documentation

I've created comprehensive documentation at: /app/docs/SECTION-NAVIGATOR.md

<section class="section-navigator">
  <div class="section-navigator-header">
    <h2 class="section-navigator-title">Our Process</h2>
    <p class="section-navigator-description">From initial research to final delivery.</p>
  </div>
  
  <div class="section-navigator-body">
    <nav class="section-navigator-nav gradient-smaragd-aquamarin basic-tabs-overlay-white">
      <a href="#dossier" class="section-nav-item active" data-section="dossier">Dossier</a>
      <a href="#marketing" class="section-nav-item" data-section="marketing">Marketing</a>
      <a href="#execution" class="section-nav-item" data-section="execution">Execution</a>
    </nav>
    
    <div class="section-navigator-content">
      <div id="dossier" class="section-navigator-section active">
        <h3 class="section-navigator-section-title">Dossier</h3>
        <div class="section-navigator-section-content">
          <p>The foundation of any successful program.</p>
        </div>
      </div>
      
      <div id="marketing" class="section-navigator-section">
        <h3 class="section-navigator-section-title">Marketing</h3>
        <div class="section-navigator-section-content">
          <p>Compelling marketing initiatives.</p>
        </div>
      </div>
      
      <div id="execution" class="section-navigator-section">
        <h3 class="section-navigator-section-title">Execution</h3>
        <div class="section-navigator-section-content">
          <p>Strategy transformed into results.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Add an Intro Image to a Section

Usage

<div class="section-navigator-section active" id="dossier">
    <div class="section-image">
        <img src="/images/Portfolio/Upmarkit-Digital-Program-CEIBS.jpg" alt="CEIBS Production, Shanghai">
    </div>
    <h3>Section Title</h3>
    <p>Content...</p>
</div>

With overlay

<div class="section-image section-image-overlay-white-center">
    <img src="/images/Portfolio/Upmarkit-Digital-Program-CEIBS.jpg" alt="CEIBS Production, Shanghai">
</div>

Overlay options (same as header):

Class	Effect
section-image-overlay-white	Uniform white overlay (40% opacity)
section-image-overlay-white-center	White radial gradient vignette
section-image-overlay-black	Uniform black overlay (40% opacity)
section-image-overlay-black-center	Black radial gradient vignette

Example with overlay:

<div class="section-image section-image-overlay-white-center" 
     style="--section-image-url: url('/images/Portfolio/Upmarkit-Digital-Program-Sandriver-Store.