feat: make LiveEditor and Exporter web apps more prominent

- Homepage hero: two tiles under the course URL field that open the
  LiveEditor ("Write a new course") and the Exporter web app ("Export
  for your LMS"), configured via banner.tools in _index.md.
- Navbar: add the Exporter web app as a top-level item next to the
  LiveEditor (own identifier, since "More" already has an "Exporter").

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: andre-dietrich

assets/css/custom.css

@@ -38,3 +38,92 @@
     U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
     U+2C60-2C7F, U+A720-A7FF;
 }
+
+/* Homepage hero: tool entry points (LiveEditor, Exporter) under the URL field.
+   Flex with margins instead of gap, so old browsers (see legacy.css) get it too. */
+.hero-tools {
+  max-width: 560px;
+  margin: 2rem auto;
+}
+.hero-tools-label {
+  display: flex;
+  align-items: center;
+  margin: 0 0 1rem;
+  font-size: 0.9rem;
+  color: #717171;
+}
+.hero-tools-label::before,
+.hero-tools-label::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: #eaeaea;
+}
+.hero-tools-label span {
+  padding: 0 0.75rem;
+}
+.hero-tools-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -6px;
+}
+.hero-tool {
+  flex: 1 1 240px;
+  display: flex;
+  align-items: flex-start;
+  margin: 6px;
+  padding: 16px;
+  border: 1px solid #eaeaea;
+  border-radius: 12px;
+  background: #fff;
+  color: #444;
+  text-align: left;
+  text-decoration: none;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+.hero-tool:hover,
+.hero-tool:focus-visible {
+  border-color: #2b7a78;
+  box-shadow: 0 6px 20px rgba(4, 4, 4, 0.08);
+}
+.hero-tool-icon {
+  flex: none;
+  width: 40px;
+  height: 40px;
+  margin-right: 12px;
+  border-radius: 10px;
+  background: #2b7a78;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.hero-tool-text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.4;
+}
+.hero-tool-text strong {
+  color: #040404;
+  font-weight: 600;
+}
+.hero-tool-text span {
+  font-size: 0.9rem;
+}
+.dark .hero-tools-label {
+  color: #b4afb6;
+}
+.dark .hero-tools-label::before,
+.dark .hero-tools-label::after {
+  background: #3e3e3e;
+}
+.dark .hero-tool {
+  background: #222;
+  border-color: #3e3e3e;
+  color: #b4afb6;
+}
+.dark .hero-tool-text strong {
+  color: #fff;
+}

config/_default/menus.en.toml

@@ -12,27 +12,33 @@ weight = 2
 
 [[main]]
 name = "LiveEditor"
-url = "https://liascript.github.io/LiveEditor"
+url = "https://liascript.github.io/LiveEditor/"
 weight = 3
 
+[[main]]
+name = "Exporter"
+identifier = "exporter-web-app"
+url = "https://liascript.github.io/LiaScript-Exporter/"
+weight = 4
+
 [[main]]
 name = "Blog"
 pageRef = "blog"
-weight = 4
+weight = 5
 
 [[main]]
 name = "About"
 pageRef = "about"
-weight = 5
+weight = 6
 
 [[main]]
 name = "Services"
 pageRef = "pages/services"
-weight = 6
+weight = 7
 
 [[main]]
 name = "Community"
-weight = 7
+weight = 8
 
 [[main]]
 parent = "Community"
@@ -47,7 +53,7 @@ pageRef = "pages/community-graph"
 weight = 2
 
 [[main]]
-weight = 8
+weight = 9
 name = "More"
 
 [[main]]

content/english/_index.md

@@ -18,6 +18,16 @@ banner:
       <i class="fa fa-arrow-right pl-2"></i>
     </button>
   image: "/images/main.png"
+  tools_label: "or start right in your browser"
+  tools:
+    - title: "Write a new course"
+      content: "in the LiveEditor, with live preview"
+      icon: "fa fa-pen"
+      link: "https://liascript.github.io/LiveEditor/"
+    - title: "Export for your LMS"
+      content: "SCORM, xAPI, PDF, ePub with the Exporter"
+      icon: "fa fa-box"
+      link: "https://liascript.github.io/LiaScript-Exporter/"
 
 # Demo Video Section
 demo_video:

layouts/index.html

@@ -11,6 +11,32 @@ <h1 class="mb-4 text-h3 lg:text-h1">
             <p class="mb-8">
               {{ .content | markdownify }}
             </p>
+            {{ $label := .tools_label }}
+            {{ with .tools }}
+              <div class="hero-tools">
+                {{ with $label }}
+                  <p class="hero-tools-label"><span>{{ . }}</span></p>
+                {{ end }}
+                <div class="hero-tools-list">
+                  {{ range . }}
+                    <a
+                      class="hero-tool"
+                      href="{{ .link | absURL }}"
+                      {{ if strings.HasPrefix .link `http` }}
+                        target="_blank" rel="noopener"
+                      {{ end }}>
+                      <span class="hero-tool-icon" aria-hidden="true"
+                        ><i class="{{ .icon }}"></i
+                      ></span>
+                      <span class="hero-tool-text">
+                        <strong>{{ .title }}</strong>
+                        <span>{{ .content }}</span>
+                      </span>
+                    </a>
+                  {{ end }}
+                </div>
+              </div>
+            {{ end }}
           </div>
           <div class="col-12">
             {{ partial "image" (dict "Src" .image "Alt" "Banner image" "Loading" "eager" "Class" "mx-auto lg:!max-w-[800px]" "DisplayXL" "800x" ) }}