Use intro video in the docs (#7604)

docs/astro/src/content/docs/guide/language/concepts/slint-language.mdx

@@ -1,21 +1,111 @@
 ---
 <!-- Copyright © SixtyFPS GmbH <[email protected]> ; SPDX-License-Identifier: MIT -->
+// cSpell: ignore GLloeHGWb3A
 title: Slint Language
 description: Slint Language
 ---
 
 import Link from '/src/components/Link.astro';
+import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
+import { YouTube } from 'astro-embed';
 
-The objective of the concepts section of the guide is to give you an overview of the language from a high level. If you want to
-dive straight in the details then check out the <Link type="slintFile" label="coding section"/> and the language reference
-sections.
+This following section gives you an insight into the thinking behind the language and the core concepts it's made up from.
+
+<YouTube id="GLloeHGWb3A" poster="https://github.com/user-attachments/assets/e4a9e699-2f87-4030-9f56-69fd52b25fa8"/>
+
+As covered in the video above, the Slint declarative UI language is designed to be a simple, yet powerful way to create
+any user interface you can imagine.
+
+```slint
+Text {
+    text: "Hello World!";
+    font-size: 24px;
+    color: #0044ff;
+}
+```
+
+This example shows the core of how Slint works. Use elements with their name followed by open and closed braces,
+e.g. `Text {}`. Then within the braces customize it with properties e.g. `font-size: 24px`.
+
+To nest elements inside each other place them within the parents braces. For example the following
+`Rectangle` has a `Text` element as its child.
+
+<CodeSnippetMD imagePath="/src/assets/generated/intro-nesting.png" scale="3" imageWidth="200" imageHeight="200" imageAlt='Image showing text nested inside a rectangle'>
+
+```slint
+Rectangle {
+  width: 150px;
+  height: 60px;
+  background: white;
+  border-radius: 10px;
+
+  Text {
+      text: "Hello World!";
+      font-size: 24px;
+      color: black;
+  }
+}
+```
+
+</CodeSnippetMD>
+
+The final core part are binding expressions:
 
-This section gives you an insight into the thinking behind the language and the core concepts it is made up from.
+```slint showLineNumbers=true {10}
+property <int> counter: 0;
+
+Rectangle {
+  width: 150px;
+  height: 60px;
+  background: white;
+  border-radius: 10px;
+
+  Text {
+      text: "Count: " + counter;
+      font-size: 24px;
+      color: black;
+  }
+  TouchArea {
+      clicked => {
+          counter += 1;
+      }
+  }
+}
+```
+
+In this example a property called `counter` is declared. Then the `Rectangle` has a
+`TouchArea` inside, that automatically fills its parent and responds to clicks or taps. On click
+it increments `counter`. Here is where the magic of fine grained reactivity comes in.
+
+The `Text` element's `text` property depends on the `counter` property. When `counter` changes, the UI is automatically
+updated. There's no need to opt in. In Slint every expression is automatically re-evaluated. However this
+is done in a performant way that only updates expressions where the dependencies have changed.
+
+Slint makes it trivial to create your own components by composing together the built in elements or other components.
+`Text` and `Rectangles` can become buttons. Buttons and input fields can become forms or dialogs. Forms and dialogs can become Views.
+And finally Views combine to become applications.
+
+```slint no-test
+export component MyView {
+  Dialog {
+    title: "Can UI Development Be Easy?";
+    Button {
+      text: "Yes";
+    }
+  }
+}
+```
+
+With practice you can reduce any level of complexity to simple, maintainable UI components.
 
 
 
 ## Why Slint?
 
+The objective of the concepts section of the guide is to give you an overview of the language from a high level. If you want to
+dive straight in the details then check out the <Link type="slintFile" label="coding section"/> and the language reference
+sections.
+
 The Slint language describes your application's User Interface in a declarative way.
 
 A User Interface is quite different from abstract code. It's made up