Demo for presentation

src/docs/02-documentation/01-writing-editing-reviewing/01-writing.mdx

@@ -13,10 +13,10 @@ description: "Step 1: Writing your content"
 
 While **Markdown** is a lightweight markup language that is widely used for creating formatted documents with plain text, there may be instances where additional flexibility and interactivity are required. This is why DocsKit supports **MDX** (Markdown with JSX). MDX is an extension of Markdown that allows the embedding of JSX (JavaScript XML) components within Markdown documents. This powerful combination enables the seamless integration of static content with dynamic elements, such as interactive code snippets, data visualizations, or even embedded videos.
 
-To begin writing your documentation with DocsKit, knowing basic Markdown syntax is enough.
 
 <Message> If you are not familiar with the Markdown syntax, you can learn the basics from the [Markdown Guide](https://www.markdownguide.org/) and from the [MDX Documentation](https://mdxjs.com/docs/what-is-mdx/).</Message>
 
+This is a test sentence for demo purposes.
 
 ### Templates
 

src/docs/08-uni-demo.mdx

@@ -0,0 +1,50 @@
+---
+title: Uni Demo
+slug: uni-demo
+description: This is a test page created for the university course.
+hideToc: true
+---
+
+# Welcome to the Uni Demo Page
+
+Congratulations, you found the most experimental page in this entire DocsKit site.
+This is where we test things, break things, and pretend everything was intentional.
+
+Button Example
+<Button href="#"> Primary button </Button> *(This button performs no action. A perfectly safe choice.)*
+
+<Message variant="error"> Critical Notice: This is an error message. Luckily, it does not reflect the current state of the demo. Probably. </Message>
+
+## What happens here?
+
+A few things:
+
+* We click on buttons to see if they look important
+* We add code blocks we never plan to run
+* We act like this is all part of a carefully designed curriculum
+* And yes, we absolutely copy-paste everything
+
+Grid Layout Example
+<Grid> <Card variant="highlighted" hoverable> Column 1 Ideal for demonstrating layout behavior. </Card> <Card variant="highlighted" hoverable> Column 2 Also ideal. Symmetry is underrated. </Card> </Grid>
+
+## A Very Serious Code Example
+
+```javascript
+// This code does nothing useful.
+// Much like the author of this page before morning coffee.
+
+function summonDocumentationSpirit() {
+  console.log("📚 The docs spirit has arrived. Behold the knowledge!");
+}
+
+summonDocumentationSpirit();
+```
+
+
+## Final Wisdom
+
+<Card shadow hoverable> *Standard card* Useful for grouping information, or pretending something is more important than it is. </Card> <Card variant="highlighted" hoverable> *Highlighted card* This one appears more important. Whether it actually is—that’s a matter of perspective. </Card>
+
+This page exists purely for demo purposes.
+If anything breaks during the presentation, we will call it a feature.
+If nothing breaks… we will still call it a feature.