improved landing page

andre-dietrich · andre-dietrich · commit 8df6088bded2 · 2025-12-08T22:05:04.000+01:00
diff --git a/content/english/_index.md b/content/english/_index.md
@@ -1,83 +1,83 @@
 ---
-# Banner
 banner:
-  title: "Open Educational Resources made Easy and Decentralized..."
+  title: "Turn simple Markdown into interactive open courses"
   content: |
-    Share your knowledge and build online courses with simple LiaScript! LiaScript is an open Markdown dialect and interpreter for interactive and educational content, providing everything you need to jumpstart a journey to engaging OER projects.
+    Create, share, and remix Open Educational Resources with LiaScript — an open Markdown dialect and interpreter that transforms plain text into fully interactive courses in any modern browser.
+    <div style="font-size: 1rem; opacity: 0.85; margin: 0.8rem;">
+      <em>For — Educators · Institutions · Developers</em>
+    </div>
+    <strong>Already have a LiaScript (Markdown) file?</strong><br>
     <br>
-    <br>
-    <input type="url" style="border: 1px solid black; border-radius: 5px; padding: 8px; margin-right: 6px;" placeholder="Enter your Markdown-URL ..." id="course_url">
+    <input
+      type="url"
+      style="border: 1px solid black; border-radius: 5px; padding: 8px; margin-right: 6px; max-width: 360px; width: 100%;"
+      placeholder="Paste its URL here and open it as a live course"
+      id="course_url">
     <button class="btn btn-primary" onclick="location.href = load(document.getElementById('course_url').value); return false;">
-      Load Course
+      Open Course
       <i class="fa fa-arrow-right pl-2"></i>
     </button>
-
   image: "/images/main.png"
   button:
-    enable: false
-    label: "Load Course"
-    link: "https://liascript.github.com/course"
+    enable: true
+    label: "LiaScript Hello World"
+    link: "https://liascript.github.io/course/?https://raw.githubusercontent.com/LiaScript/Hello-LiaScript/refs/heads/main/README.md#1"
+
+# Demo Video Section
+demo_video:
+  enable: true
+  title: "See LiaScript in Action"
+  description: "A short demo showcasing how plain Markdown becomes an interactive course."
+  video: "https://www.youtube.com/embed/rbqm6MN0We4"
 
 # Features
 features:
-  - title: "No Building Steps (no configuration)"
+  - title: "No build steps. No configuration."
     image: "/images/example.png"
     content: |
-      Your course is parsed and rendered in real-time within the browser at client-side. You only have to provide the URL to your course file. A course is a simple Markdown format with support for:
+      LiaScript parses and renders your course directly in the browser, on the client side, in real time. All you need is the URL to your course file. A course is just a plain Markdown document enhanced with LiaScript for:
     bulletpoints:
-      - multimedia content & animations
-      - text to speech output in different languages
-      - quizzes & surveys
-      - online programming
+      - rich multimedia content & lightweight animations
+      - text-to-speech output in multiple languages
+      - quizzes, surveys, and self-checks
+      - online programming and executable examples
       - ASCII-art diagrams & dynamic charts
-      - JavaScript by default
-      - collaborative classrooms
+      - seamless JavaScript integration
+      - collaborative and interactive classrooms
     button:
       enable: true
-      label: "Documentation"
+      label: "Read the Documentation"
       link: "https://liascript.github.io/course/?https://raw.githubusercontent.com/liaScript/docs/master/README.md#1"
 
-  - title: "Open-courSe"
+  - title: "Open-courSe: like open source, but for courses"
     image: "/images/bg-showcase-2.jpg"
     content: |
-      You are the owner of your content, but by hosting your course on github you give others the chance to contribute to, to translate, to adapt to your course.
-      There is no single source of truth, so why should there be only one course. With the help of git branches and forks it may be possible to develop course for different students and target audiences. 
+      You stay in full control of your content — but by hosting your courses on GitHub, you make it easy for others to contribute, translate, and adapt them. There is no single source of truth, and there does not have to be only one course. With branches and forks you can evolve multiple variants for different languages, contexts, and target groups.
     button:
       enable: true
-      label: "List Open Courses"
+      label: "Explore Open Courses"
       link: "https://github.com/topics/liascript-course"
 
-
-  - title: "JavaScript Ready"
+  - title: "JavaScript-ready by design"
     image: "/images/monch.jpg"
     content: |
-      In contrast to other Markdown-parsers you are free to use any JavaScript library you want. This way you can integrate any kind of visualization, simulation, computer-algebra-system, or whatever you might think is useful for your course.
+      Unlike most Markdown parsers, LiaScript lets you use any JavaScript library you like. Integrate visualizations, simulations, computer algebra systems, or custom widgets — whatever helps your learners.
       <br />
-      To simplify the usage of JavaScript and HTML elements, LiaScript provides a macro-system to cover repetitive tasks. 
-      
+      To make this easy and reusable, LiaScript provides a powerful macro system that lets you wrap HTML and JavaScript into simple, author-friendly building blocks.
     button:
       enable: true
-      label: "List of Templates"
+      label: "Browse Templates"
       link: "https://github.com/topics/liascript-template"
-      
 
-  - title: "LiveEditor"
+  - title: "LiveEditor: collaborative authoring in your browser"
     image: "/images/LiveEditor.png"
     content: |
-      This is a browser-based collaborative online editor for LiaScript.
-      All content is stored within your browser. Collaboration is
-      enabled by
+      The LiveEditor is a browser-based collaborative editor built specifically for LiaScript. Your content is stored locally in your browser; collaboration happens peer-to-peer via
       <a target="_blank" href="https://webrtc.org">WebRTC</a> and
-      <a href="https://yjs.dev/">Yjs</a>. The snippets are already
-      included, simply type "lia" to explore some features of LiaScript.
-      By the way, if you have a GitHub account, you can directly export
-      your courses to gists.
-      
+      <a href="https://yjs.dev/">Yjs</a>.
+      Snippets for common LiaScript patterns are built-in — just type "lia" to discover them. And if you have a GitHub account, you can export your courses directly as gists with a few clicks.
     button:
       enable: true
-      label: "Try it out"
+      label: "Try the LiveEditor"
       link: "https://liascript.github.io/LiveEditor"
-
-  
-
 ---
diff --git a/content/english/about/_index.md b/content/english/about/_index.md
@@ -1,18 +1,34 @@
 ---
 title: "About LiaScript"
 meta_title: "About LiaScript"
-description: "LiaScript is a Markdown dialect that allows you to create educational content that is interactive, extendable, and open-source."
-image: "/images/author/andre-dietrich.jpeg"
+description: "LiaScript is an open Markdown dialect for creating interactive, extendable, and truly open educational content."
+image: "/images/favicon.png"
 draft: false
 ---
 
+LiaScript began with a simple frustration: while online learning keeps growing, most MOOCs and tutorials remain closed, static, and expensive to produce. They are difficult to update, rarely available as OER, and often designed only for large English-speaking audiences. A single recorded mistake can live forever.
 
+I wanted a different kind of educational ecosystem — one that works the way open-source software works: collaborative, adaptable, forkable, and accessible to everyone.
 
-I am a huge fan of online-courses (MOOCs), tutorials, YouTube-courses, podcasts, etc., BUT ... MOOCs are not in the public domain (although they should be), produced expensively by publishers, which are interested in user numbers and therefore only produce general courses for a large English speaking audience. Video and audio recordings are also hard to produce, they are “static” and one mistake or a missing fact cannot be fixed that easy.
+That idea became LiaScript.
 
-That is why I started to develop LiaScript, as a simple and extendable Markdown-dialect that allows sharing knowledge by creating interactive courses in an Open-Source manner, where anyone can participate and contribute. Even if it is a course for a minor audience, such as teaching cuneiform writing to 8-graders in Swahili.
-"Like in the movie Ratatouille ... “anybody can cook”."
+LiaScript is an open, Markdown-based language and interpreter that turns plain text into fully interactive courses — quizzes, simulations, animations, code execution, TTS, and much more — directly in the browser, even offline.  
+No proprietary platforms. No complex build steps. No lock-in.
 
-Source at GitHub: https://github.com/LiaScript/LiaScript
+Our mission:
 
-... and most of all, I hate the fact that education is still a business with private schools and universities, expensive BOOKS and MOOCS...
+**Make high-quality, open education easy to create and impossible to close.**
+
+With LiaScript, courses behave like open-source projects.  
+They can be versioned, translated, remixed, and improved by communities, educators, and institutions. Whether you’re teaching a major university lecture or creating a small course for a niche audience — even something like cuneiform writing for 8th-graders in Swahili — LiaScript enables it.
+
+As in *Ratatouille*:  
+**“Anyone can cook.”**  
+With LiaScript, the belief is similar:  
+**“Anyone can share knowledge.”**
+
+The project is fully open-source and developed in public on GitHub:  
+https://github.com/LiaScript/LiaScript
+
+Education should not be a gated business of paywalls, exclusive institutions, and static materials.  
+It should be open, adaptable, collaborative — and shared freely with the world.
diff --git a/themes/hugoplate/layouts/index.html b/themes/hugoplate/layouts/index.html
@@ -11,10 +11,13 @@ <h1 class="mb-4 text-h3 lg:text-h1">
             <p class="mb-8">
               {{ .content | markdownify }}
             </p>
+          </div>
+          <div class="col-12">
+            {{ partial "image" (dict "Src" .image "Alt" "Banner image" "Loading" "eager" "Class" "mx-auto lg:!max-w-[800px]" "DisplayXL" "800x" ) }}
             {{ with .button }}
               {{ if .enable }}
                 <a
-                  class="btn btn-primary"
+                  class="btn btn-primary block w-fit mx-auto mt-6"
                   href="{{ .link | absURL }}"
                   {{ if strings.HasPrefix .link `http` }}
                     target="_blank" rel="noopener"
@@ -25,15 +28,42 @@ <h1 class="mb-4 text-h3 lg:text-h1">
               {{ end }}
             {{ 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" ) }}
-          </div>
         </div>
       </div>
     </section>
   {{ end }}
   <!-- /Banner -->
 
+  <!-- Demo Video -->
+  {{ with .Params.demo_video }}
+    {{ if .enable }}
+      <section class="section py-2">
+        <div class="container">
+          <div class="mx-auto max-w-8xl text-center">
+            <h2 class="h2 mb-4">
+              {{ .title | markdownify }}
+            </h2>
+            <p class="text-lg mb-8 text-gray-600">
+              {{ .description | markdownify }}
+            </p>
+
+            <div
+              class="relative"
+              style="padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px;">
+              <iframe
+                src="{{ .video }}"
+                frameborder="0"
+                allowfullscreen
+                style="position: absolute; top:0; left:0; width:100%; height:100%; border-radius: 12px;">
+              </iframe>
+            </div>
+          </div>
+        </div>
+      </section>
+    {{ end }}
+  {{ end }}
+  <!-- /Demo Video -->
+
   <!-- Features -->
   {{ range $i, $e:= .Params.features }}
     <section class="section-sm {{ if (modBool $i 2) }}bg-gradient{{ end }}">
