diff --git a/slides.md b/slides.md
index 3aaad72..45f6c7c 100644
--- a/slides.md
+++ b/slides.md
@@ -110,519 +110,30 @@ layoutClass: gap-16
- ๐ **It works on my machine?!?!** - Code behaves differently in development, testing, and production due to differences in environment (OS, dependencies, configurations).
- ๐จ **Dependency conflicts** - Different applications require conflicting versions of the same dependency (e.g., Python 2 vs 3, different Node versions).
- ๐งโ๐ป **Slow and error-prone deployments** - Traditional deployments involve manual steps or configuration drift between environments.
-- ๐คน **Interactive** - embed Vue components to enhance your expressions
-- ๐ฅ **Recording** - built-in recording and camera view
-- ๐ค **Portable** - export to PDF, PPTX, PNGs, or even a hostable SPA
-- ๐ **Hackable** - virtually anything that's possible on a webpage is possible in Slidev
-
::right::
-#
+# Solutions
- Containers package the application and its dependencies in a consistent, isolated environment, ensuring it behaves the same everywhere.
- Containers isolate applications and their dependencies from each other and the host system, preventing conflicts.
- Containers provide predictable, repeatable, and scriptable deployments through container images.
---
-layout: image-right
-image: https://cover.sli.dev
+transition: slide-right
+layout: two-cols
+layoutClass: gap-16
---
-# Code
+# Problems?
-Use code snippets and get the highlighting directly, and even types hover!
+- ๐ **Inefficient resource usage in virtual machines (VMs)** - VMs have high overhead due to running full operating systems, leading to inefficiency.
+- ๐จ **Difficult scalability and orchestration** - Scaling applications manually is hard and error-prone.
+- ๐งโ๐ป **Inconsistent development workflows** - devs all have different setups, leading to inconsistent builds and bugs.
-```ts {all|5|7|7-8|10|all} twoslash
-// TwoSlash enables TypeScript hover information
-// and errors in markdown code blocks
-// More at https://shiki.style/packages/twoslash
+::right::
+# Solutions
-import { computed, ref } from 'vue'
-
-const count = ref(0)
-const doubled = computed(() => count.value * 2)
-
-doubled.value = 2
-```
-
-
-
-
-<<< @/snippets/external.ts#snippet
-
-
-
-[Learn more](https://sli.dev/features/line-highlighting)
-
-
-
-
-
-
----
-level: 2
+- Containers share the host OS kernel and are more lightweight, enabling faster startup and denser packing of applications.
+- Containers integrate well with orchestrators (like Kubernetes), enabling automated scaling, rolling updates, and fault tolerance.
+- Containers standardize development environments using tools like Docker Compose or dev containers.
---
-# Shiki Magic Move
-
-Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev supports animations across multiple code snippets.
-
-Add multiple code blocks and wrap them with ````md magic-move (four backticks) to enable the magic move. For example:
-
-````md magic-move {lines: true}
-```ts {*|2|*}
-// step 1
-const author = reactive({
- name: 'John Doe',
- books: [
- 'Vue 2 - Advanced Guide',
- 'Vue 3 - Basic Guide',
- 'Vue 4 - The Mystery'
- ]
-})
-```
-
-```ts {*|1-2|3-4|3-4,8}
-// step 2
-export default {
- data() {
- return {
- author: {
- name: 'John Doe',
- books: [
- 'Vue 2 - Advanced Guide',
- 'Vue 3 - Basic Guide',
- 'Vue 4 - The Mystery'
- ]
- }
- }
- }
-}
-```
-
-```ts
-// step 3
-export default {
- data: () => ({
- author: {
- name: 'John Doe',
- books: [
- 'Vue 2 - Advanced Guide',
- 'Vue 3 - Basic Guide',
- 'Vue 4 - The Mystery'
- ]
- }
- })
-}
-```
-
-Non-code blocks are ignored.
-
-```vue
-
-
-```
-````
-
----
-
-# Components
-
-
-
-
-You can use Vue components directly inside your slides.
-
-We have provided a few built-in components like `` and `` that you can use directly. And adding your custom components is also super easy.
-
-```html
-
-```
-
-
-
-
-Check out [the guides](https://sli.dev/builtin/components.html) for more.
-
-
-
-
-```html
-
-```
-
-
-
-
-
-
-```yaml
----
-theme: default
----
-```
-
-```yaml
----
-theme: seriph
----
-```
-
-
-
-
-
-
-
-This shows up when you click the slide:
-
-```html
-
This shows up when you click the slide.
-```
-
-
-
-
-
-The v-mark directive
-also allows you to add
-inline marks
-, powered by [Rough Notation](https://roughnotation.com/):
-
-```html
-inline markers
-```
-
-
-
-
-
-[Learn more](https://sli.dev/guide/animations#click-animation)
-
-
-
----
-
-# Motions
-
-Motion animations are powered by [@vueuse/motion](https://motion.vueuse.org/), triggered by `v-motion` directive.
-
-```html
-
- Slidev
-
-```
-
-
-
-
-
-
-
-
-[Learn more](https://sli.dev/guide/animations.html#motion)
-
-
-
----
-
-# LaTeX
-
-LaTeX is supported out-of-box. Powered by [KaTeX](https://katex.org/).
-
-
-
-Inline $\sqrt{3x-1}+(1+x)^2$
-
-Block
-$$ {1|3|all}
-\begin{aligned}
-\nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\
-\nabla \cdot \vec{B} &= 0 \\
-\nabla \times \vec{E} &= -\frac{\partial\vec{B}}{\partial t} \\
-\nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\varepsilon_0\frac{\partial\vec{E}}{\partial t}
-\end{aligned}
-$$
-
-[Learn more](https://sli.dev/features/latex)
-
----
-
-# Diagrams
-
-You can create diagrams / graphs from textual descriptions, directly in your Markdown.
-
-
-
-```mermaid {scale: 0.5, alt: 'A simple sequence diagram'}
-sequenceDiagram
- Alice->John: Hello John, how are you?
- Note over Alice,John: A typical interaction
-```
-
-```mermaid {theme: 'neutral', scale: 0.8}
-graph TD
-B[Text] --> C{Decision}
-C -->|One| D[Result 1]
-C -->|Two| E[Result 2]
-```
-
-```mermaid
-mindmap
- root((mindmap))
- Origins
- Long history
- ::icon(fa fa-book)
- Popularisation
- British popular psychology author Tony Buzan
- Research
- On effectiveness
and features
- On Automatic creation
- Uses
- Creative techniques
- Strategic planning
- Argument mapping
- Tools
- Pen and paper
- Mermaid
-```
-
-```plantuml {scale: 0.7}
-@startuml
-
-package "Some Group" {
- HTTP - [First Component]
- [Another Component]
-}
-
-node "Other Groups" {
- FTP - [Second Component]
- [First Component] --> FTP
-}
-
-cloud {
- [Example 1]
-}
-
-database "MySql" {
- folder "This is my folder" {
- [Folder 3]
- }
- frame "Foo" {
- [Frame 4]
- }
-}
-
-[Another Component] --> [Example 1]
-[Example 1] --> [Folder 3]
-[Folder 3] --> [Frame 4]
-
-@enduml
-```
-
-
-
-Learn more: [Mermaid Diagrams](https://sli.dev/features/mermaid) and [PlantUML Diagrams](https://sli.dev/features/plantuml)
-
----
-foo: bar
-dragPos:
- square: 691,32,167,_,-16
----
-
-# Draggable Elements
-
-Double-click on the draggable elements to edit their positions.
-
-
-
-###### Directive Usage
-
-```md
-
-```
-
-
-
-###### Component Usage
-
-```md
-
-
- Use the `v-drag` component to have a draggable container!
-
-```
-
-
-
- Double-click me!
-
-
-
-
-
-###### Draggable Arrow
-
-```md
-
-```
-
-
-
----
-src: ./pages/imported-slides.md
-hide: false
----
-
----
-
-# Monaco Editor
-
-Slidev provides built-in Monaco Editor support.
-
-Add `{monaco}` to the code block to turn it into an editor:
-
-```ts {monaco}
-import { ref } from 'vue'
-import { emptyArray } from './external'
-
-const arr = ref(emptyArray(10))
-```
-
-Use `{monaco-run}` to create an editor that can execute the code directly in the slide:
-
-```ts {monaco-run}
-import { version } from 'vue'
-import { emptyArray, sayHello } from './external'
-
-sayHello()
-console.log(`vue ${version}`)
-console.log(emptyArray(10).reduce(fib => [...fib, fib.at(-1)! + fib.at(-2)!], [1, 1]))
-```
-
----
-layout: center
-class: text-center
----
-
-# Learn More
-
-[Documentation](https://sli.dev) ยท [GitHub](https://github.com/slidevjs/slidev) ยท [Showcases](https://sli.dev/resources/showcases)
-
-
- 
- 
-