docs: Add quick sample

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-    <img width="600px" src="https://raw.githubusercontent.com/paveldedik/ludic/main/docs/assets/ludic.png" alt="ludic">
+    <img width="600px" src="https://raw.githubusercontent.com/paveldedik/ludic/main/docs/assets/ludic.png" alt="Ludic Logo">
 </p>
 
 [![test](https://github.com/paveldedik/ludic/actions/workflows/test.yaml/badge.svg)](https://github.com/paveldedik/ludic/actions) [![codecov](https://codecov.io/gh/paveldedik/ludic/graph/badge.svg?token=BBDNJWHMGX)](https://codecov.io/gh/paveldedik/ludic) [![Python 3.12](https://img.shields.io/badge/python-3.12-blue.svg)](https://www.python.org/downloads/release/python-312/) [![Checked with mypy](http://www.mypy-lang.org/static/mypy_badge.svg)](http://mypy-lang.org/) [![Discord Server](https://img.shields.io/badge/discord-ludic-black)](https://discord.gg/4Y5fSQUS)
@@ -34,6 +34,12 @@ Here is a table comparing Ludic to other similar tools:
 
 <sup>(*) HTMX as well as Starlette are optional dependencies for Ludic, it does not enforce any frontend or backend frameworks. At it's core, Ludic only generates HTML and allows registering CSS.</sup>
 
+## Quick Demo
+
+<p align="center">
+    <img width="600px" src="https://raw.githubusercontent.com/paveldedik/ludic/main/docs/assets/quick-demo.gif" alt="Quick Demo">
+</p>
+
 ## Motivation
 
 This framework allows HTML generation in Python while utilizing Python's typing system. Our goal is to enable the creation of dynamic web applications with reusable components, all while offering a greater level of type safety than raw HTML.