From 5ab2d8abfdd95c20d3ec3f73c1151bc6c43acd76 Mon Sep 17 00:00:00 2001
From: coma <zavarykingleb@gmail.com>
Date: Thu, 25 Sep 2025 01:54:30 +0400
Subject: [PATCH] aaaaa

---
 .gitignore                                    |   24 +
 .npmrc                                        |    1 +
 README.md                                     |   58 +
 builder.config.json                           |    6 +
 jsconfig.json                                 |   12 +
 package-lock.json                             | 2235 +++++++++++++++++
 package.json                                  |   51 +
 src/app.css                                   |  215 ++
 src/app.html                                  |   19 +
 src/lib/components/BlogCard.svelte            |   72 +
 src/lib/components/CRTScreen.svelte           |   76 +
 src/lib/components/Error.svelte               |    7 +
 src/lib/components/Footer.svelte              |  104 +
 src/lib/components/GlitchText.svelte          |   58 +
 src/lib/components/Loading.svelte             |    7 +
 src/lib/components/MarkdownRender.svelte      |    9 +
 src/lib/components/Navigation.svelte          |  257 ++
 src/lib/components/RetroButton.svelte         |   85 +
 .../components/Sections/BlogSection.svelte    |   84 +
 .../components/Sections/HeroSection.svelte    |  557 ++++
 .../Sections/ProjectsSection.svelte           |  161 ++
 .../components/Sections/TeamSection.svelte    |  622 +++++
 src/lib/components/TeamCard.svelte            |   95 +
 src/lib/config.js                             |   43 +
 src/lib/index.js                              |    1 +
 src/lib/services/api.js                       |   20 +
 src/lib/services/blogService.js               |  164 ++
 src/lib/services/teamService.js               |  110 +
 src/lib/utils/date.js                         |   32 +
 src/lib/utils/markdown.js                     |   26 +
 src/routes/(main)/+page.svelte                |  960 +++++++
 src/routes/(main)/about/+page.svelte          |  942 +++++++
 src/routes/(main)/blog/+page.svelte           |  837 ++++++
 src/routes/(main)/blog/[id]/+page.js          |    5 +
 src/routes/(main)/blog/[id]/+page.svelte      |  657 +++++
 src/routes/(main)/team/+page.svelte           |  827 ++++++
 src/routes/(main)/team/+server.js             |   76 +
 src/routes/+error.svelte                      |   23 +
 src/routes/+layout.svelte                     |   18 +
 src/routes/admin/+page.svelte                 |   27 +
 src/routes/api/posts/+server.js               |   77 +
 src/routes/api/team/+server.js                |   57 +
 static/favicon.svg                            |    1 +
 svelte.config.js                              |   14 +
 vite.config.js                                |    6 +
 45 files changed, 9738 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 .npmrc
 create mode 100644 README.md
 create mode 100644 builder.config.json
 create mode 100644 jsconfig.json
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 src/app.css
 create mode 100644 src/app.html
 create mode 100644 src/lib/components/BlogCard.svelte
 create mode 100644 src/lib/components/CRTScreen.svelte
 create mode 100644 src/lib/components/Error.svelte
 create mode 100644 src/lib/components/Footer.svelte
 create mode 100644 src/lib/components/GlitchText.svelte
 create mode 100644 src/lib/components/Loading.svelte
 create mode 100644 src/lib/components/MarkdownRender.svelte
 create mode 100644 src/lib/components/Navigation.svelte
 create mode 100644 src/lib/components/RetroButton.svelte
 create mode 100644 src/lib/components/Sections/BlogSection.svelte
 create mode 100644 src/lib/components/Sections/HeroSection.svelte
 create mode 100644 src/lib/components/Sections/ProjectsSection.svelte
 create mode 100644 src/lib/components/Sections/TeamSection.svelte
 create mode 100644 src/lib/components/TeamCard.svelte
 create mode 100644 src/lib/config.js
 create mode 100644 src/lib/index.js
 create mode 100644 src/lib/services/api.js
 create mode 100644 src/lib/services/blogService.js
 create mode 100644 src/lib/services/teamService.js
 create mode 100644 src/lib/utils/date.js
 create mode 100644 src/lib/utils/markdown.js
 create mode 100644 src/routes/(main)/+page.svelte
 create mode 100644 src/routes/(main)/about/+page.svelte
 create mode 100644 src/routes/(main)/blog/+page.svelte
 create mode 100644 src/routes/(main)/blog/[id]/+page.js
 create mode 100644 src/routes/(main)/blog/[id]/+page.svelte
 create mode 100644 src/routes/(main)/team/+page.svelte
 create mode 100644 src/routes/(main)/team/+server.js
 create mode 100644 src/routes/+error.svelte
 create mode 100644 src/routes/+layout.svelte
 create mode 100644 src/routes/admin/+page.svelte
 create mode 100644 src/routes/api/posts/+server.js
 create mode 100644 src/routes/api/team/+server.js
 create mode 100644 static/favicon.svg
 create mode 100644 svelte.config.js
 create mode 100644 vite.config.js

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..294b385
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+/dist
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..b6f27f1
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..196ce87
--- /dev/null
+++ b/README.md
@@ -0,0 +1,58 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```
diff --git a/builder.config.json b/builder.config.json
new file mode 100644
index 0000000..27737be
--- /dev/null
+++ b/builder.config.json
@@ -0,0 +1,6 @@
+{
+  "command": "npm run dev",
+  "serverUrl": "http://localhost:5173/blog",
+  "authenticateProxy": false,
+  "commitMode": "commits"
+}
\ No newline at end of file
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..1394d6c
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,12 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext"
+	}
+}
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..144cd23
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,2235 @@
+{
+	"name": "blog58teamfront",
+	"version": "0.0.1",
+	"lockfileVersion": 3,
+	"requires": true,
+	"packages": {
+		"": {
+			"name": "blog58teamfront",
+			"version": "0.0.1",
+			"dependencies": {
+				"@sveltestrap/sveltestrap": "^7.1.0",
+				"axios": "^1.12.2",
+				"marked": "^16.3.0",
+				"sanitize-html": "^2.17.0"
+			},
+			"devDependencies": {
+				"@sveltejs/adapter-auto": "^6.0.0",
+				"@sveltejs/kit": "^2.22.0",
+				"@sveltejs/package": "^2.0.0",
+				"@sveltejs/vite-plugin-svelte": "^6.0.0",
+				"mdsvex": "^0.12.3",
+				"publint": "^0.3.2",
+				"svelte": "^5.39.3",
+				"typescript": "^5.3.2",
+				"vite": "^7.0.4"
+			},
+			"peerDependencies": {
+				"svelte": "^5.0.0"
+			}
+		},
+		"node_modules/@esbuild/aix-ppc64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.10.tgz",
+			"integrity": "sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"aix"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/android-arm": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.10.tgz",
+			"integrity": "sha512-dQAxF1dW1C3zpeCDc5KqIYuZ1tgAdRXNoZP7vkBIRtKZPYe2xVr/d3SkirklCHudW1B45tGiUlz2pUWDfbDD4w==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/android-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.10.tgz",
+			"integrity": "sha512-LSQa7eDahypv/VO6WKohZGPSJDq5OVOo3UoFR1E4t4Gj1W7zEQMUhI+lo81H+DtB+kP+tDgBp+M4oNCwp6kffg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/android-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.10.tgz",
+			"integrity": "sha512-MiC9CWdPrfhibcXwr39p9ha1x0lZJ9KaVfvzA0Wxwz9ETX4v5CHfF09bx935nHlhi+MxhA63dKRRQLiVgSUtEg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/darwin-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.10.tgz",
+			"integrity": "sha512-JC74bdXcQEpW9KkV326WpZZjLguSZ3DfS8wrrvPMHgQOIEIG/sPXEN/V8IssoJhbefLRcRqw6RQH2NnpdprtMA==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/darwin-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.10.tgz",
+			"integrity": "sha512-tguWg1olF6DGqzws97pKZ8G2L7Ig1vjDmGTwcTuYHbuU6TTjJe5FXbgs5C1BBzHbJ2bo1m3WkQDbWO2PvamRcg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/freebsd-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.10.tgz",
+			"integrity": "sha512-3ZioSQSg1HT2N05YxeJWYR+Libe3bREVSdWhEEgExWaDtyFbbXWb49QgPvFH8u03vUPX10JhJPcz7s9t9+boWg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/freebsd-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.10.tgz",
+			"integrity": "sha512-LLgJfHJk014Aa4anGDbh8bmI5Lk+QidDmGzuC2D+vP7mv/GeSN+H39zOf7pN5N8p059FcOfs2bVlrRr4SK9WxA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-arm": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.10.tgz",
+			"integrity": "sha512-oR31GtBTFYCqEBALI9r6WxoU/ZofZl962pouZRTEYECvNF/dtXKku8YXcJkhgK/beU+zedXfIzHijSRapJY3vg==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.10.tgz",
+			"integrity": "sha512-5luJWN6YKBsawd5f9i4+c+geYiVEw20FVW5x0v1kEMWNq8UctFjDiMATBxLvmmHA4bf7F6hTRaJgtghFr9iziQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-ia32": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.10.tgz",
+			"integrity": "sha512-NrSCx2Kim3EnnWgS4Txn0QGt0Xipoumb6z6sUtl5bOEZIVKhzfyp/Lyw4C1DIYvzeW/5mWYPBFJU3a/8Yr75DQ==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-loong64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.10.tgz",
+			"integrity": "sha512-xoSphrd4AZda8+rUDDfD9J6FUMjrkTz8itpTITM4/xgerAZZcFW7Dv+sun7333IfKxGG8gAq+3NbfEMJfiY+Eg==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-mips64el": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.10.tgz",
+			"integrity": "sha512-ab6eiuCwoMmYDyTnyptoKkVS3k8fy/1Uvq7Dj5czXI6DF2GqD2ToInBI0SHOp5/X1BdZ26RKc5+qjQNGRBelRA==",
+			"cpu": [
+				"mips64el"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-ppc64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.10.tgz",
+			"integrity": "sha512-NLinzzOgZQsGpsTkEbdJTCanwA5/wozN9dSgEl12haXJBzMTpssebuXR42bthOF3z7zXFWH1AmvWunUCkBE4EA==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-riscv64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.10.tgz",
+			"integrity": "sha512-FE557XdZDrtX8NMIeA8LBJX3dC2M8VGXwfrQWU7LB5SLOajfJIxmSdyL/gU1m64Zs9CBKvm4UAuBp5aJ8OgnrA==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-s390x": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.10.tgz",
+			"integrity": "sha512-3BBSbgzuB9ajLoVZk0mGu+EHlBwkusRmeNYdqmznmMc9zGASFjSsxgkNsqmXugpPk00gJ0JNKh/97nxmjctdew==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/linux-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.10.tgz",
+			"integrity": "sha512-QSX81KhFoZGwenVyPoberggdW1nrQZSvfVDAIUXr3WqLRZGZqWk/P4T8p2SP+de2Sr5HPcvjhcJzEiulKgnxtA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/netbsd-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.10.tgz",
+			"integrity": "sha512-AKQM3gfYfSW8XRk8DdMCzaLUFB15dTrZfnX8WXQoOUpUBQ+NaAFCP1kPS/ykbbGYz7rxn0WS48/81l9hFl3u4A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/netbsd-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.10.tgz",
+			"integrity": "sha512-7RTytDPGU6fek/hWuN9qQpeGPBZFfB4zZgcz2VK2Z5VpdUxEI8JKYsg3JfO0n/Z1E/6l05n0unDCNc4HnhQGig==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openbsd-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.10.tgz",
+			"integrity": "sha512-5Se0VM9Wtq797YFn+dLimf2Zx6McttsH2olUBsDml+lm0GOCRVebRWUvDtkY4BWYv/3NgzS8b/UM3jQNh5hYyw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openbsd-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.10.tgz",
+			"integrity": "sha512-XkA4frq1TLj4bEMB+2HnI0+4RnjbuGZfet2gs/LNs5Hc7D89ZQBHQ0gL2ND6Lzu1+QVkjp3x1gIcPKzRNP8bXw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openharmony-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.10.tgz",
+			"integrity": "sha512-AVTSBhTX8Y/Fz6OmIVBip9tJzZEUcY8WLh7I59+upa5/GPhh2/aM6bvOMQySspnCCHvFi79kMtdJS1w0DXAeag==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openharmony"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/sunos-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.10.tgz",
+			"integrity": "sha512-fswk3XT0Uf2pGJmOpDB7yknqhVkJQkAQOcW/ccVOtfx05LkbWOaRAtn5SaqXypeKQra1QaEa841PgrSL9ubSPQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"sunos"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/win32-arm64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.10.tgz",
+			"integrity": "sha512-ah+9b59KDTSfpaCg6VdJoOQvKjI33nTaQr4UluQwW7aEwZQsbMCfTmfEO4VyewOxx4RaDT/xCy9ra2GPWmO7Kw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/win32-ia32": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.10.tgz",
+			"integrity": "sha512-QHPDbKkrGO8/cz9LKVnJU22HOi4pxZnZhhA2HYHez5Pz4JeffhDjf85E57Oyco163GnzNCVkZK0b/n4Y0UHcSw==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/win32-x64": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.10.tgz",
+			"integrity": "sha512-9KpxSVFCu0iK1owoez6aC/s/EdUQLDN3adTxGCqxMVhrPDj6bt5dbrHDXUuq+Bs2vATFBBrQS5vdQ/Ed2P+nbw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@jridgewell/gen-mapping": {
+			"version": "0.3.13",
+			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+			"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"@jridgewell/trace-mapping": "^0.3.24"
+			}
+		},
+		"node_modules/@jridgewell/remapping": {
+			"version": "2.3.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+			"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/gen-mapping": "^0.3.5",
+				"@jridgewell/trace-mapping": "^0.3.24"
+			}
+		},
+		"node_modules/@jridgewell/resolve-uri": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6.0.0"
+			}
+		},
+		"node_modules/@jridgewell/sourcemap-codec": {
+			"version": "1.5.5",
+			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+			"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+			"license": "MIT"
+		},
+		"node_modules/@jridgewell/trace-mapping": {
+			"version": "0.3.31",
+			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+			"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/resolve-uri": "^3.1.0",
+				"@jridgewell/sourcemap-codec": "^1.4.14"
+			}
+		},
+		"node_modules/@polka/url": {
+			"version": "1.0.0-next.29",
+			"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
+			"integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@popperjs/core": {
+			"version": "2.11.8",
+			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+			"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/popperjs"
+			}
+		},
+		"node_modules/@publint/pack": {
+			"version": "0.1.2",
+			"resolved": "https://registry.npmjs.org/@publint/pack/-/pack-0.1.2.tgz",
+			"integrity": "sha512-S+9ANAvUmjutrshV4jZjaiG8XQyuJIZ8a4utWmN/vW1sgQ9IfBnPndwkmQYw53QmouOIytT874u65HEmu6H5jw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://bjornlu.com/sponsor"
+			}
+		},
+		"node_modules/@rollup/rollup-android-arm-eabi": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.0.tgz",
+			"integrity": "sha512-VxDYCDqOaR7NXzAtvRx7G1u54d2kEHopb28YH/pKzY6y0qmogP3gG7CSiWsq9WvDFxOQMpNEyjVAHZFXfH3o/A==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			]
+		},
+		"node_modules/@rollup/rollup-android-arm64": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.0.tgz",
+			"integrity": "sha512-pqDirm8koABIKvzL59YI9W9DWbRlTX7RWhN+auR8HXJxo89m4mjqbah7nJZjeKNTNYopqL+yGg+0mhCpf3xZtQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			]
+		},
+		"node_modules/@rollup/rollup-darwin-arm64": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.0.tgz",
+			"integrity": "sha512-YCdWlY/8ltN6H78HnMsRHYlPiKvqKagBP1r+D7SSylxX+HnsgXGCmLiV3Y4nSyY9hW8qr8U9LDUx/Lo7M6MfmQ==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@rollup/rollup-darwin-x64": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.0.tgz",
+			"integrity": "sha512-z4nw6y1j+OOSGzuVbSWdIp1IUks9qNw4dc7z7lWuWDKojY38VMWBlEN7F9jk5UXOkUcp97vA1N213DF+Lz8BRg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			]
+		},
+		"node_modules/@rollup/rollup-freebsd-arm64": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.0.tgz",
+			"integrity": "sha512-Q/dv9Yvyr5rKlK8WQJZVrp5g2SOYeZUs9u/t2f9cQ2E0gJjYB/BWoedXfUT0EcDJefi2zzVfhcOj8drWCzTviw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			]
+		},
+		"node_modules/@rollup/rollup-freebsd-x64": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.0.tgz",
+			"integrity": "sha512-kdBsLs4Uile/fbjZVvCRcKB4q64R+1mUq0Yd7oU1CMm1Av336ajIFqNFovByipciuUQjBCPMxwJhCgfG2re3rg==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.0.tgz",
+			"integrity": "sha512-aL6hRwu0k7MTUESgkg7QHY6CoqPgr6gdQXRJI1/VbFlUMwsSzPGSR7sG5d+MCbYnJmJwThc2ol3nixj1fvI/zQ==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm-musleabihf": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.0.tgz",
+			"integrity": "sha512-BTs0M5s1EJejgIBJhCeiFo7GZZ2IXWkFGcyZhxX4+8usnIo5Mti57108vjXFIQmmJaRyDwmV59Tw64Ap1dkwMw==",
+			"cpu": [
+				"arm"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm64-gnu": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.0.tgz",
+			"integrity": "sha512-uj672IVOU9m08DBGvoPKPi/J8jlVgjh12C9GmjjBxCTQc3XtVmRkRKyeHSmIKQpvJ7fIm1EJieBUcnGSzDVFyw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-arm64-musl": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.0.tgz",
+			"integrity": "sha512-/+IVbeDMDCtB/HP/wiWsSzduD10SEGzIZX2945KSgZRNi4TSkjHqRJtNTVtVb8IRwhJ65ssI56krlLik+zFWkw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-loong64-gnu": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.0.tgz",
+			"integrity": "sha512-U1vVzvSWtSMWKKrGoROPBXMh3Vwn93TA9V35PldokHGqiUbF6erSzox/5qrSMKp6SzakvyjcPiVF8yB1xKr9Pg==",
+			"cpu": [
+				"loong64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-ppc64-gnu": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.0.tgz",
+			"integrity": "sha512-X/4WfuBAdQRH8cK3DYl8zC00XEE6aM472W+QCycpQJeLWVnHfkv7RyBFVaTqNUMsTgIX8ihMjCvFF9OUgeABzw==",
+			"cpu": [
+				"ppc64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-riscv64-gnu": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.0.tgz",
+			"integrity": "sha512-xIRYc58HfWDBZoLmWfWXg2Sq8VCa2iJ32B7mqfWnkx5mekekl0tMe7FHpY8I72RXEcUkaWawRvl3qA55og+cwQ==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-riscv64-musl": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.0.tgz",
+			"integrity": "sha512-mbsoUey05WJIOz8U1WzNdf+6UMYGwE3fZZnQqsM22FZ3wh1N887HT6jAOjXs6CNEK3Ntu2OBsyQDXfIjouI4dw==",
+			"cpu": [
+				"riscv64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-s390x-gnu": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.0.tgz",
+			"integrity": "sha512-qP6aP970bucEi5KKKR4AuPFd8aTx9EF6BvutvYxmZuWLJHmnq4LvBfp0U+yFDMGwJ+AIJEH5sIP+SNypauMWzg==",
+			"cpu": [
+				"s390x"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-x64-gnu": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.0.tgz",
+			"integrity": "sha512-nmSVN+F2i1yKZ7rJNKO3G7ZzmxJgoQBQZ/6c4MuS553Grmr7WqR7LLDcYG53Z2m9409z3JLt4sCOhLdbKQ3HmA==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-linux-x64-musl": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.0.tgz",
+			"integrity": "sha512-2d0qRo33G6TfQVjaMR71P+yJVGODrt5V6+T0BDYH4EMfGgdC/2HWDVjSSFw888GSzAZUwuska3+zxNUCDco6rQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			]
+		},
+		"node_modules/@rollup/rollup-openharmony-arm64": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.0.tgz",
+			"integrity": "sha512-A1JalX4MOaFAAyGgpO7XP5khquv/7xKzLIyLmhNrbiCxWpMlnsTYr8dnsWM7sEeotNmxvSOEL7F65j0HXFcFsw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openharmony"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-arm64-msvc": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.0.tgz",
+			"integrity": "sha512-YQugafP/rH0eOOHGjmNgDURrpYHrIX0yuojOI8bwCyXwxC9ZdTd3vYkmddPX0oHONLXu9Rb1dDmT0VNpjkzGGw==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-ia32-msvc": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.0.tgz",
+			"integrity": "sha512-zYdUYhi3Qe2fndujBqL5FjAFzvNeLxtIqfzNEVKD1I7C37/chv1VxhscWSQHTNfjPCrBFQMnynwA3kpZpZ8w4A==",
+			"cpu": [
+				"ia32"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-x64-gnu": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.0.tgz",
+			"integrity": "sha512-fGk03kQylNaCOQ96HDMeT7E2n91EqvCDd3RwvT5k+xNdFCeMGnj5b5hEgTGrQuyidqSsD3zJDQ21QIaxXqTBJw==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@rollup/rollup-win32-x64-msvc": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.0.tgz",
+			"integrity": "sha512-6iKDCVSIUQ8jPMoIV0OytRKniaYyy5EbY/RRydmLW8ZR3cEBhxbWl5ro0rkUNe0ef6sScvhbY79HrjRm8i3vDQ==",
+			"cpu": [
+				"x64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			]
+		},
+		"node_modules/@standard-schema/spec": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+			"integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@sveltejs/acorn-typescript": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
+			"integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
+			"license": "MIT",
+			"peerDependencies": {
+				"acorn": "^8.9.0"
+			}
+		},
+		"node_modules/@sveltejs/adapter-auto": {
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-6.1.0.tgz",
+			"integrity": "sha512-shOuLI5D2s+0zTv2ab5M5PqfknXqWbKi+0UwB9yLTRIdzsK1R93JOO8jNhIYSHdW+IYXIYnLniu+JZqXs7h9Wg==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"@sveltejs/kit": "^2.0.0"
+			}
+		},
+		"node_modules/@sveltejs/kit": {
+			"version": "2.42.2",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.42.2.tgz",
+			"integrity": "sha512-FcNICFvlSYjPiAgk8BpqTEnXkaUj6I6wDwpQBxKMpsYhUc2Q5STgsVpXOG5LqwFpUAoLAXQ4wdWul7EcAG67JQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@standard-schema/spec": "^1.0.0",
+				"@sveltejs/acorn-typescript": "^1.0.5",
+				"@types/cookie": "^0.6.0",
+				"acorn": "^8.14.1",
+				"cookie": "^0.6.0",
+				"devalue": "^5.3.2",
+				"esm-env": "^1.2.2",
+				"kleur": "^4.1.5",
+				"magic-string": "^0.30.5",
+				"mrmime": "^2.0.0",
+				"sade": "^1.8.1",
+				"set-cookie-parser": "^2.6.0",
+				"sirv": "^3.0.0"
+			},
+			"bin": {
+				"svelte-kit": "svelte-kit.js"
+			},
+			"engines": {
+				"node": ">=18.13"
+			},
+			"peerDependencies": {
+				"@opentelemetry/api": "^1.0.0",
+				"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0",
+				"svelte": "^4.0.0 || ^5.0.0-next.0",
+				"vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0"
+			},
+			"peerDependenciesMeta": {
+				"@opentelemetry/api": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@sveltejs/package": {
+			"version": "2.5.3",
+			"resolved": "https://registry.npmjs.org/@sveltejs/package/-/package-2.5.3.tgz",
+			"integrity": "sha512-E8trf3nQRDsBoiUz52zc219M0lYnr/Sn/l7q3ZKQ90z9iYhwD/BufJPXb78t45n2Kqc+HfN6e0eN79pd1wKCSA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"chokidar": "^4.0.3",
+				"kleur": "^4.1.5",
+				"sade": "^1.8.1",
+				"semver": "^7.5.4",
+				"svelte2tsx": "~0.7.33"
+			},
+			"bin": {
+				"svelte-package": "svelte-package.js"
+			},
+			"engines": {
+				"node": "^16.14 || >=18"
+			},
+			"peerDependencies": {
+				"svelte": "^3.44.0 || ^4.0.0 || ^5.0.0-next.1"
+			}
+		},
+		"node_modules/@sveltejs/vite-plugin-svelte": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-6.2.0.tgz",
+			"integrity": "sha512-nJsV36+o7rZUDlrnSduMNl11+RoDE1cKqOI0yUEBCcqFoAZOk47TwD3dPKS2WmRutke9StXnzsPBslY7prDM9w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
+				"debug": "^4.4.1",
+				"deepmerge": "^4.3.1",
+				"magic-string": "^0.30.17",
+				"vitefu": "^1.1.1"
+			},
+			"engines": {
+				"node": "^20.19 || ^22.12 || >=24"
+			},
+			"peerDependencies": {
+				"svelte": "^5.0.0",
+				"vite": "^6.3.0 || ^7.0.0"
+			}
+		},
+		"node_modules/@sveltejs/vite-plugin-svelte-inspector": {
+			"version": "5.0.1",
+			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-5.0.1.tgz",
+			"integrity": "sha512-ubWshlMk4bc8mkwWbg6vNvCeT7lGQojE3ijDh3QTR6Zr/R+GXxsGbyH4PExEPpiFmqPhYiVSVmHBjUcVc1JIrA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"debug": "^4.4.1"
+			},
+			"engines": {
+				"node": "^20.19 || ^22.12 || >=24"
+			},
+			"peerDependencies": {
+				"@sveltejs/vite-plugin-svelte": "^6.0.0-next.0",
+				"svelte": "^5.0.0",
+				"vite": "^6.3.0 || ^7.0.0"
+			}
+		},
+		"node_modules/@sveltestrap/sveltestrap": {
+			"version": "7.1.0",
+			"resolved": "https://registry.npmjs.org/@sveltestrap/sveltestrap/-/sveltestrap-7.1.0.tgz",
+			"integrity": "sha512-TpIx25kqLV+z+VD3yfqYayOI1IaCeWFbT0uqM6NfA4vQgDs9PjFwmjkU4YEAlV/ngs9e7xPmaRWE7lkrg4Miow==",
+			"license": "MIT",
+			"dependencies": {
+				"@popperjs/core": "^2.11.8"
+			},
+			"peerDependencies": {
+				"svelte": "^4.0.0 || ^5.0.0 || ^5.0.0-next.0"
+			}
+		},
+		"node_modules/@types/cookie": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/estree": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+			"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+			"license": "MIT"
+		},
+		"node_modules/@types/mdast": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+			"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "*"
+			}
+		},
+		"node_modules/@types/unist": {
+			"version": "2.0.11",
+			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+			"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/acorn": {
+			"version": "8.15.0",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+			"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+			"license": "MIT",
+			"bin": {
+				"acorn": "bin/acorn"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/aria-query": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/asynckit": {
+			"version": "0.4.0",
+			"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+			"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+			"license": "MIT"
+		},
+		"node_modules/axios": {
+			"version": "1.12.2",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+			"integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
+			"license": "MIT",
+			"dependencies": {
+				"follow-redirects": "^1.15.6",
+				"form-data": "^4.0.4",
+				"proxy-from-env": "^1.1.0"
+			}
+		},
+		"node_modules/axobject-query": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/call-bind-apply-helpers": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+			"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"function-bind": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/chokidar": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+			"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"readdirp": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 14.16.0"
+			},
+			"funding": {
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/combined-stream": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+			"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+			"license": "MIT",
+			"dependencies": {
+				"delayed-stream": "~1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
+		"node_modules/cookie": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/debug": {
+			"version": "4.4.3",
+			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+			"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"ms": "^2.1.3"
+			},
+			"engines": {
+				"node": ">=6.0"
+			},
+			"peerDependenciesMeta": {
+				"supports-color": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/dedent-js": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/dedent-js/-/dedent-js-1.0.1.tgz",
+			"integrity": "sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/deepmerge": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+			"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/delayed-stream": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+			"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/devalue": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.3.2.tgz",
+			"integrity": "sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/dom-serializer": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+			"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+			"license": "MIT",
+			"dependencies": {
+				"domelementtype": "^2.3.0",
+				"domhandler": "^5.0.2",
+				"entities": "^4.2.0"
+			},
+			"funding": {
+				"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+			}
+		},
+		"node_modules/domelementtype": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+			"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			],
+			"license": "BSD-2-Clause"
+		},
+		"node_modules/domhandler": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+			"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"domelementtype": "^2.3.0"
+			},
+			"engines": {
+				"node": ">= 4"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domhandler?sponsor=1"
+			}
+		},
+		"node_modules/domutils": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+			"integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"dom-serializer": "^2.0.0",
+				"domelementtype": "^2.3.0",
+				"domhandler": "^5.0.3"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/domutils?sponsor=1"
+			}
+		},
+		"node_modules/dunder-proto": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+			"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+			"license": "MIT",
+			"dependencies": {
+				"call-bind-apply-helpers": "^1.0.1",
+				"es-errors": "^1.3.0",
+				"gopd": "^1.2.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/entities": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"license": "BSD-2-Clause",
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
+		"node_modules/es-define-property": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+			"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-errors": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+			"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-object-atoms": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+			"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/es-set-tostringtag": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+			"integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+			"license": "MIT",
+			"dependencies": {
+				"es-errors": "^1.3.0",
+				"get-intrinsic": "^1.2.6",
+				"has-tostringtag": "^1.0.2",
+				"hasown": "^2.0.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/esbuild": {
+			"version": "0.25.10",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.10.tgz",
+			"integrity": "sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"bin": {
+				"esbuild": "bin/esbuild"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"optionalDependencies": {
+				"@esbuild/aix-ppc64": "0.25.10",
+				"@esbuild/android-arm": "0.25.10",
+				"@esbuild/android-arm64": "0.25.10",
+				"@esbuild/android-x64": "0.25.10",
+				"@esbuild/darwin-arm64": "0.25.10",
+				"@esbuild/darwin-x64": "0.25.10",
+				"@esbuild/freebsd-arm64": "0.25.10",
+				"@esbuild/freebsd-x64": "0.25.10",
+				"@esbuild/linux-arm": "0.25.10",
+				"@esbuild/linux-arm64": "0.25.10",
+				"@esbuild/linux-ia32": "0.25.10",
+				"@esbuild/linux-loong64": "0.25.10",
+				"@esbuild/linux-mips64el": "0.25.10",
+				"@esbuild/linux-ppc64": "0.25.10",
+				"@esbuild/linux-riscv64": "0.25.10",
+				"@esbuild/linux-s390x": "0.25.10",
+				"@esbuild/linux-x64": "0.25.10",
+				"@esbuild/netbsd-arm64": "0.25.10",
+				"@esbuild/netbsd-x64": "0.25.10",
+				"@esbuild/openbsd-arm64": "0.25.10",
+				"@esbuild/openbsd-x64": "0.25.10",
+				"@esbuild/openharmony-arm64": "0.25.10",
+				"@esbuild/sunos-x64": "0.25.10",
+				"@esbuild/win32-arm64": "0.25.10",
+				"@esbuild/win32-ia32": "0.25.10",
+				"@esbuild/win32-x64": "0.25.10"
+			}
+		},
+		"node_modules/escape-string-regexp": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/esm-env": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
+			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
+			"license": "MIT"
+		},
+		"node_modules/esrap": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/esrap/-/esrap-2.1.0.tgz",
+			"integrity": "sha512-yzmPNpl7TBbMRC5Lj2JlJZNPml0tzqoqP5B1JXycNUwtqma9AKCO0M2wHrdgsHcy1WRW7S9rJknAMtByg3usgA==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.15"
+			}
+		},
+		"node_modules/fdir": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+			"integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"peerDependencies": {
+				"picomatch": "^3 || ^4"
+			},
+			"peerDependenciesMeta": {
+				"picomatch": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/follow-redirects": {
+			"version": "1.15.11",
+			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+			"integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+			"funding": [
+				{
+					"type": "individual",
+					"url": "https://github.com/sponsors/RubenVerborgh"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=4.0"
+			},
+			"peerDependenciesMeta": {
+				"debug": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/form-data": {
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+			"integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+			"license": "MIT",
+			"dependencies": {
+				"asynckit": "^0.4.0",
+				"combined-stream": "^1.0.8",
+				"es-set-tostringtag": "^2.1.0",
+				"hasown": "^2.0.2",
+				"mime-types": "^2.1.12"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
+		"node_modules/fsevents": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+			"dev": true,
+			"hasInstallScript": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+			}
+		},
+		"node_modules/function-bind": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+			"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/get-intrinsic": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+			"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+			"license": "MIT",
+			"dependencies": {
+				"call-bind-apply-helpers": "^1.0.2",
+				"es-define-property": "^1.0.1",
+				"es-errors": "^1.3.0",
+				"es-object-atoms": "^1.1.1",
+				"function-bind": "^1.1.2",
+				"get-proto": "^1.0.1",
+				"gopd": "^1.2.0",
+				"has-symbols": "^1.1.0",
+				"hasown": "^2.0.2",
+				"math-intrinsics": "^1.1.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/get-proto": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+			"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+			"license": "MIT",
+			"dependencies": {
+				"dunder-proto": "^1.0.1",
+				"es-object-atoms": "^1.0.0"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/gopd": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+			"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-symbols": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+			"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/has-tostringtag": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+			"integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+			"license": "MIT",
+			"dependencies": {
+				"has-symbols": "^1.0.3"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/hasown": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+			"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+			"license": "MIT",
+			"dependencies": {
+				"function-bind": "^1.1.2"
+			},
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/htmlparser2": {
+			"version": "8.0.2",
+			"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+			"integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+			"funding": [
+				"https://github.com/fb55/htmlparser2?sponsor=1",
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/fb55"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"domelementtype": "^2.3.0",
+				"domhandler": "^5.0.3",
+				"domutils": "^3.0.1",
+				"entities": "^4.4.0"
+			}
+		},
+		"node_modules/is-plain-object": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+			"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/is-reference": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "^1.0.6"
+			}
+		},
+		"node_modules/kleur": {
+			"version": "4.1.5",
+			"resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+			"integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/locate-character": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+			"license": "MIT"
+		},
+		"node_modules/lower-case": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+			"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/magic-string": {
+			"version": "0.30.19",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
+			"integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.5.5"
+			}
+		},
+		"node_modules/marked": {
+			"version": "16.3.0",
+			"resolved": "https://registry.npmjs.org/marked/-/marked-16.3.0.tgz",
+			"integrity": "sha512-K3UxuKu6l6bmA5FUwYho8CfJBlsUWAooKtdGgMcERSpF7gcBUrCGsLH7wDaaNOzwq18JzSUDyoEb/YsrqMac3w==",
+			"license": "MIT",
+			"bin": {
+				"marked": "bin/marked.js"
+			},
+			"engines": {
+				"node": ">= 20"
+			}
+		},
+		"node_modules/math-intrinsics": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+			"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
+		"node_modules/mdsvex": {
+			"version": "0.12.6",
+			"resolved": "https://registry.npmjs.org/mdsvex/-/mdsvex-0.12.6.tgz",
+			"integrity": "sha512-pupx2gzWh3hDtm/iDW4WuCpljmyHbHi34r7ktOqpPGvyiM4MyfNgdJ3qMizXdgCErmvYC9Nn/qyjePy+4ss9Wg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/mdast": "^4.0.4",
+				"@types/unist": "^2.0.3",
+				"prism-svelte": "^0.4.7",
+				"prismjs": "^1.17.1",
+				"unist-util-visit": "^2.0.1",
+				"vfile-message": "^2.0.4"
+			},
+			"peerDependencies": {
+				"svelte": "^3.56.0 || ^4.0.0 || ^5.0.0-next.120"
+			}
+		},
+		"node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"license": "MIT",
+			"dependencies": {
+				"mime-db": "1.52.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mri": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+			"integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4"
+			}
+		},
+		"node_modules/mrmime": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.1.tgz",
+			"integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/ms": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+			"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/nanoid": {
+			"version": "3.3.11",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+			"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"bin": {
+				"nanoid": "bin/nanoid.cjs"
+			},
+			"engines": {
+				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+			}
+		},
+		"node_modules/no-case": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+			"integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"lower-case": "^2.0.2",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/package-manager-detector": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.3.0.tgz",
+			"integrity": "sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/parse-srcset": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+			"integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
+			"license": "MIT"
+		},
+		"node_modules/pascal-case": {
+			"version": "3.1.2",
+			"resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+			"integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"no-case": "^3.0.4",
+				"tslib": "^2.0.3"
+			}
+		},
+		"node_modules/picocolors": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+			"license": "ISC"
+		},
+		"node_modules/picomatch": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/jonschlinkert"
+			}
+		},
+		"node_modules/postcss": {
+			"version": "8.5.6",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+			"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"nanoid": "^3.3.11",
+				"picocolors": "^1.1.1",
+				"source-map-js": "^1.2.1"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			}
+		},
+		"node_modules/prism-svelte": {
+			"version": "0.4.7",
+			"resolved": "https://registry.npmjs.org/prism-svelte/-/prism-svelte-0.4.7.tgz",
+			"integrity": "sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/prismjs": {
+			"version": "1.30.0",
+			"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
+			"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/proxy-from-env": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+			"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+			"license": "MIT"
+		},
+		"node_modules/publint": {
+			"version": "0.3.13",
+			"resolved": "https://registry.npmjs.org/publint/-/publint-0.3.13.tgz",
+			"integrity": "sha512-NC+lph09+BRO9LJgKlIy3WQXyu6/6WDQ0dCA60KALUwdKVf3PfGuC6fY8I+oKB/5kEPh50aOSUz+6yWy1n4EfA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@publint/pack": "^0.1.2",
+				"package-manager-detector": "^1.3.0",
+				"picocolors": "^1.1.1",
+				"sade": "^1.8.1"
+			},
+			"bin": {
+				"publint": "src/cli.js"
+			},
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://bjornlu.com/sponsor"
+			}
+		},
+		"node_modules/readdirp": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+			"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 14.18.0"
+			},
+			"funding": {
+				"type": "individual",
+				"url": "https://paulmillr.com/funding/"
+			}
+		},
+		"node_modules/rollup": {
+			"version": "4.52.0",
+			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.0.tgz",
+			"integrity": "sha512-+IuescNkTJQgX7AkIDtITipZdIGcWF0pnVvZTWStiazUmcGA2ag8dfg0urest2XlXUi9kuhfQ+qmdc5Stc3z7g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/estree": "1.0.8"
+			},
+			"bin": {
+				"rollup": "dist/bin/rollup"
+			},
+			"engines": {
+				"node": ">=18.0.0",
+				"npm": ">=8.0.0"
+			},
+			"optionalDependencies": {
+				"@rollup/rollup-android-arm-eabi": "4.52.0",
+				"@rollup/rollup-android-arm64": "4.52.0",
+				"@rollup/rollup-darwin-arm64": "4.52.0",
+				"@rollup/rollup-darwin-x64": "4.52.0",
+				"@rollup/rollup-freebsd-arm64": "4.52.0",
+				"@rollup/rollup-freebsd-x64": "4.52.0",
+				"@rollup/rollup-linux-arm-gnueabihf": "4.52.0",
+				"@rollup/rollup-linux-arm-musleabihf": "4.52.0",
+				"@rollup/rollup-linux-arm64-gnu": "4.52.0",
+				"@rollup/rollup-linux-arm64-musl": "4.52.0",
+				"@rollup/rollup-linux-loong64-gnu": "4.52.0",
+				"@rollup/rollup-linux-ppc64-gnu": "4.52.0",
+				"@rollup/rollup-linux-riscv64-gnu": "4.52.0",
+				"@rollup/rollup-linux-riscv64-musl": "4.52.0",
+				"@rollup/rollup-linux-s390x-gnu": "4.52.0",
+				"@rollup/rollup-linux-x64-gnu": "4.52.0",
+				"@rollup/rollup-linux-x64-musl": "4.52.0",
+				"@rollup/rollup-openharmony-arm64": "4.52.0",
+				"@rollup/rollup-win32-arm64-msvc": "4.52.0",
+				"@rollup/rollup-win32-ia32-msvc": "4.52.0",
+				"@rollup/rollup-win32-x64-gnu": "4.52.0",
+				"@rollup/rollup-win32-x64-msvc": "4.52.0",
+				"fsevents": "~2.3.2"
+			}
+		},
+		"node_modules/sade": {
+			"version": "1.8.1",
+			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+			"integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"mri": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/sanitize-html": {
+			"version": "2.17.0",
+			"resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.17.0.tgz",
+			"integrity": "sha512-dLAADUSS8rBwhaevT12yCezvioCA+bmUTPH/u57xKPT8d++voeYE6HeluA/bPbQ15TwDBG2ii+QZIEmYx8VdxA==",
+			"license": "MIT",
+			"dependencies": {
+				"deepmerge": "^4.2.2",
+				"escape-string-regexp": "^4.0.0",
+				"htmlparser2": "^8.0.0",
+				"is-plain-object": "^5.0.0",
+				"parse-srcset": "^1.0.2",
+				"postcss": "^8.3.11"
+			}
+		},
+		"node_modules/semver": {
+			"version": "7.7.2",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+			"integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/set-cookie-parser": {
+			"version": "2.7.1",
+			"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+			"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/sirv": {
+			"version": "3.0.2",
+			"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.2.tgz",
+			"integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@polka/url": "^1.0.0-next.24",
+				"mrmime": "^2.0.0",
+				"totalist": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/source-map-js": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
+		"node_modules/svelte": {
+			"version": "5.39.3",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.39.3.tgz",
+			"integrity": "sha512-7Jwus6iXviGZAvhqbeYu3NNHA6LGyQ8EbmjdAhJUDade5rrW6g9VnBbRhUuYX4pMZLHozijsFolt88zvKPfsbQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/remapping": "^2.3.4",
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"@sveltejs/acorn-typescript": "^1.0.5",
+				"@types/estree": "^1.0.5",
+				"acorn": "^8.12.1",
+				"aria-query": "^5.3.1",
+				"axobject-query": "^4.1.0",
+				"clsx": "^2.1.1",
+				"esm-env": "^1.2.1",
+				"esrap": "^2.1.0",
+				"is-reference": "^3.0.3",
+				"locate-character": "^3.0.0",
+				"magic-string": "^0.30.11",
+				"zimmerframe": "^1.1.2"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/svelte2tsx": {
+			"version": "0.7.43",
+			"resolved": "https://registry.npmjs.org/svelte2tsx/-/svelte2tsx-0.7.43.tgz",
+			"integrity": "sha512-TtxMuk520th4ZEvUQrhbDAyyQ1I+kc5dZCA4ChOLlbVXZfqenrY45iTH27DpLyx/u4STEz8O3hkGm5goTS8JhQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"dedent-js": "^1.0.1",
+				"pascal-case": "^3.1.1"
+			},
+			"peerDependencies": {
+				"svelte": "^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0",
+				"typescript": "^4.9.4 || ^5.0.0"
+			}
+		},
+		"node_modules/tinyglobby": {
+			"version": "0.2.15",
+			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+			"integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"fdir": "^6.5.0",
+				"picomatch": "^4.0.3"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/SuperchupuDev"
+			}
+		},
+		"node_modules/totalist": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/tslib": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/typescript": {
+			"version": "5.9.2",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
+			"integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"bin": {
+				"tsc": "bin/tsc",
+				"tsserver": "bin/tsserver"
+			},
+			"engines": {
+				"node": ">=14.17"
+			}
+		},
+		"node_modules/unist-util-is": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
+			"integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-stringify-position": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
+			"integrity": "sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^2.0.2"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+			"integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-is": "^4.0.0",
+				"unist-util-visit-parents": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/unist-util-visit-parents": {
+			"version": "3.1.1",
+			"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+			"integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-is": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile-message": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
+			"integrity": "sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/unist": "^2.0.0",
+				"unist-util-stringify-position": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vite": {
+			"version": "7.1.6",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.6.tgz",
+			"integrity": "sha512-SRYIB8t/isTwNn8vMB3MR6E+EQZM/WG1aKmmIUCfDXfVvKfc20ZpamngWHKzAmmu9ppsgxsg4b2I7c90JZudIQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"esbuild": "^0.25.0",
+				"fdir": "^6.5.0",
+				"picomatch": "^4.0.3",
+				"postcss": "^8.5.6",
+				"rollup": "^4.43.0",
+				"tinyglobby": "^0.2.15"
+			},
+			"bin": {
+				"vite": "bin/vite.js"
+			},
+			"engines": {
+				"node": "^20.19.0 || >=22.12.0"
+			},
+			"funding": {
+				"url": "https://github.com/vitejs/vite?sponsor=1"
+			},
+			"optionalDependencies": {
+				"fsevents": "~2.3.3"
+			},
+			"peerDependencies": {
+				"@types/node": "^20.19.0 || >=22.12.0",
+				"jiti": ">=1.21.0",
+				"less": "^4.0.0",
+				"lightningcss": "^1.21.0",
+				"sass": "^1.70.0",
+				"sass-embedded": "^1.70.0",
+				"stylus": ">=0.54.8",
+				"sugarss": "^5.0.0",
+				"terser": "^5.16.0",
+				"tsx": "^4.8.1",
+				"yaml": "^2.4.2"
+			},
+			"peerDependenciesMeta": {
+				"@types/node": {
+					"optional": true
+				},
+				"jiti": {
+					"optional": true
+				},
+				"less": {
+					"optional": true
+				},
+				"lightningcss": {
+					"optional": true
+				},
+				"sass": {
+					"optional": true
+				},
+				"sass-embedded": {
+					"optional": true
+				},
+				"stylus": {
+					"optional": true
+				},
+				"sugarss": {
+					"optional": true
+				},
+				"terser": {
+					"optional": true
+				},
+				"tsx": {
+					"optional": true
+				},
+				"yaml": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/vitefu": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.1.1.tgz",
+			"integrity": "sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ==",
+			"dev": true,
+			"license": "MIT",
+			"workspaces": [
+				"tests/deps/*",
+				"tests/projects/*",
+				"tests/projects/workspace/packages/*"
+			],
+			"peerDependencies": {
+				"vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0"
+			},
+			"peerDependenciesMeta": {
+				"vite": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/zimmerframe": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.4.tgz",
+			"integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==",
+			"license": "MIT"
+		}
+	}
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..9a2cf92
--- /dev/null
+++ b/package.json
@@ -0,0 +1,51 @@
+{
+	"name": "blog58teamfront",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.22.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^6.0.0",
+		"mdsvex": "^0.12.3",
+		"publint": "^0.3.2",
+		"svelte": "^5.39.3",
+		"typescript": "^5.3.2",
+		"vite": "^7.0.4"
+	},
+	"keywords": [
+		"svelte"
+	],
+	"dependencies": {
+		"@sveltestrap/sveltestrap": "^7.1.0",
+		"axios": "^1.12.2",
+		"marked": "^16.3.0",
+		"sanitize-html": "^2.17.0"
+	}
+}
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..bb1eada
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,215 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --primary-green: #00ff66;
+  --secondary-pink: #ff00ff;
+  --terminal-bg: #0a0a0a;
+  --terminal-border: #00ff66;
+  --text-primary: #00ff66;
+  --text-secondary: #cccccc;
+  --text-muted: #888888;
+  --bg-dark: #000000;
+  --bg-darker: #0a0a0a;
+  --accent-blue: #00aaff;
+  --accent-yellow: #ffff00;
+}
+
+body {
+  font-family: 'Courier New', 'Monaco', 'Consolas', monospace;
+  background: var(--bg-dark);
+  color: var(--text-primary);
+  line-height: 1.6;
+  overflow-x: hidden;
+  font-size: 16px;
+}
+
+/*эффект ЭЛТ монитора */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    linear-gradient(
+      to bottom,
+      rgba(18, 16, 16, 0.1) 50%,
+      rgba(0, 0, 0, 0.1) 50%
+    ),
+    radial-gradient(
+      circle at center,
+      rgba(0, 255, 102, 0.05) 0%,
+      transparent 70%
+    );
+  background-size: 100% 2px, 100% 100%;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: 0.15;
+}
+
+/* Плавные анимации */
+* {
+  transition: all 0.3s ease;
+}
+
+/*скроллбар */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-darker);
+  border: 1px solid var(--terminal-border);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--primary-green);
+  border: 1px solid var(--bg-darker);
+  border-radius: 2px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--secondary-pink);
+}
+
+/* Выделение текста */
+::selection {
+  background: var(--primary-green);
+  color: var(--bg-dark);
+}
+
+::-moz-selection {
+  background: var(--primary-green);
+  color: var(--bg-dark);
+}
+
+/* Анимации */
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+@keyframes glow {
+  0%, 100% { text-shadow: 0 0 5px var(--primary-green); }
+  50% { text-shadow: 0 0 15px var(--primary-green), 0 0 20px var(--secondary-pink); }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0px); }
+  50% { transform: translateY(-5px); }
+}
+
+.blink {
+  animation: blink 1s infinite;
+}
+
+.glow {
+  animation: glow 2s infinite;
+}
+
+.float {
+  animation: float 3s ease-in-out infinite;
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  body {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 480px) {
+  body {
+    font-size: 12px;
+  }
+}
+
+button:focus,
+a:focus,
+input:focus,
+textarea:focus {
+  outline: 2px solid var(--secondary-pink);
+  outline-offset: 2px;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+p, li {
+  line-height: 1.8;
+  color: var(--text-secondary);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.3;
+  margin-bottom: 1rem;
+}
+
+.vhs-distortion {
+  position: relative;
+  overflow: hidden;
+}
+
+.vhs-distortion::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    to bottom,
+    transparent 0%,
+    rgba(0, 255, 102, 0.03) 50%,
+    transparent 100%
+  );
+  pointer-events: none;
+  mix-blend-mode: overlay;
+}
+
+.h-50 {
+  height: 50% !important;
+}
+
+.g-3 > .row {
+  margin-right: calc(-0.5 * var(--bs-gutter-x));
+  margin-left: calc(-0.5 * var(--bs-gutter-x));
+}
+
+.g-3 > .row > * {
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
+}
+
+.logs-terminal .terminal-body,
+.filesystem-terminal .terminal-body {
+  min-height: 50%;
+}
+
+.logs-stream,
+.filesystem-stream {
+  scrollbar-width: thin;
+}
+
+/* Анимации для плавного появления */
+@keyframes terminalAppear {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.terminal-wrapper {
+  animation: terminalAppear 0.5s ease-out;
+}
+
diff --git a/src/app.html b/src/app.html
new file mode 100644
index 0000000..90053ea
--- /dev/null
+++ b/src/app.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>[58]Team Blog</title>
+    
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+    />
+    
+    %sveltekit.head%
+  </head>
+  <body data-bs-theme="dark">
+    <div style="display: flex; flex-direction: column; min-height: 100vh;">%sveltekit.body%</div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/src/lib/components/BlogCard.svelte b/src/lib/components/BlogCard.svelte
new file mode 100644
index 0000000..8872aa5
--- /dev/null
+++ b/src/lib/components/BlogCard.svelte
@@ -0,0 +1,72 @@
+<script>
+  import GlitchText from './GlitchText.svelte';
+  import CRTScreen from './CRTScreen.svelte';
+  import { formatDate } from '../utils/date.js';
+
+  export let post = {
+    slug: '',
+    title: '',
+    excerpt: '',
+    date: '',
+    author: ''
+  };
+</script>
+
+<CRTScreen class="blog-card">
+  <div class="card-content">
+    <h3 class="card-title">
+      <GlitchText text={post.title} size="1.2rem" />
+    </h3>
+    
+    <p class="card-excerpt">{post.excerpt}</p>
+    
+    <div class="card-meta">
+      <span class="card-date">{formatDate(post.date)}</span>
+      <span class="card-author">by {post.author}</span>
+    </div>
+    
+    <div class="card-actions">
+      <a href={`/blog/${post.slug}`} class="read-more">Читать →</a>
+    </div>
+  </div>
+</CRTScreen>
+
+<style>
+  .blog-card {
+    margin-bottom: 20px;
+    transition: transform 0.3s ease;
+  }
+
+  .blog-card:hover {
+    transform: translateY(-2px);
+  }
+
+  .card-title {
+    margin: 0 0 10px 0;
+    color: #33ff00;
+  }
+
+  .card-excerpt {
+    color: #ccc;
+    line-height: 1.4;
+    margin-bottom: 15px;
+  }
+
+  .card-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.9rem;
+    color: #888;
+    margin-bottom: 15px;
+  }
+
+  .read-more {
+    color: #ff00ff;
+    text-decoration: none;
+    font-weight: bold;
+  }
+
+  .read-more:hover {
+    text-decoration: underline;
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/CRTScreen.svelte b/src/lib/components/CRTScreen.svelte
new file mode 100644
index 0000000..a4291cf
--- /dev/null
+++ b/src/lib/components/CRTScreen.svelte
@@ -0,0 +1,76 @@
+<script>
+  export let scanlines = true;
+  export let flicker = true;
+</script>
+
+<div class="crt-screen" class:no-scanlines={!scanlines} class:no-flicker={!flicker}>
+  <div class="content">
+    <slot />
+  </div>
+  <div class="scanlines"></div>
+  <div class="glow"></div>
+</div>
+
+<style>
+  .crt-screen {
+    position: relative;
+    padding: 20px;
+    overflow: hidden;
+    box-shadow: 0 0 20px rgba(51, 255, 0, 0.3);
+    width: 100%;
+    height: 100%;
+  }
+
+  .content {
+    position: relative;
+    z-index: 2;
+  }
+
+  .scanlines {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      to bottom,
+      rgba(255, 255, 255, 0.03) 50%,
+      rgba(0, 0, 0, 0.1) 50%
+    );
+    background-size: 100% 4px;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  .glow {
+    position: absolute;
+    top: -10px;
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    background: radial-gradient(
+      circle at center,
+      rgba(51, 255, 0, 0.1) 0%,
+      transparent 70%
+    );
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  .no-scanlines .scanlines {
+    display: none;
+  }
+
+  .no-flicker {
+    animation: flicker 0.15s infinite;
+  }
+
+  @keyframes flicker {
+    0% { opacity: 0.9; }
+    5% { opacity: 0.8; }
+    10% { opacity: 0.9; }
+    15% { opacity: 1; }
+    20% { opacity: 0.9; }
+    100% { opacity: 1; }
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/Error.svelte b/src/lib/components/Error.svelte
new file mode 100644
index 0000000..6da22d0
--- /dev/null
+++ b/src/lib/components/Error.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { Alert } from '@sveltestrap/sveltestrap';
+</script>
+
+<Alert color="danger" class="my-3">
+   {message}
+</Alert>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
new file mode 100644
index 0000000..05d526a
--- /dev/null
+++ b/src/lib/components/Footer.svelte
@@ -0,0 +1,104 @@
+<script>
+  import { onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+
+  const systemStatus = writable('OPERATIONAL');
+  const uptime = writable('0d 0h 0m');
+
+  onMount(() => {
+    const startTime = Date.now();
+    
+    function updateUptime() {
+      const diff = Date.now() - startTime;
+      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+      uptime.set(`${days}d ${hours}h ${minutes}m`);
+    }
+
+    updateUptime();
+    const interval = setInterval(updateUptime, 60000);
+
+    return () => clearInterval(interval);
+  });
+</script>
+
+<footer class="minimal-footer">
+  <div class="footer-container">
+    <div class="footer-left">
+      <span class="footer-text">[58] Team © 2024</span>
+      <span class="footer-separator">|</span>
+      <span class="footer-status">
+        <span class="status-indicator"></span>
+        {$systemStatus}
+      </span>
+    </div>
+    
+    <div class="footer-right">
+      <span class="footer-uptime">UPTIME: {$uptime}</span>
+      <span class="footer-separator">|</span>
+      <span class="footer-version">v1.0.0</span>
+    </div>
+  </div>
+</footer>
+
+<style>
+  .minimal-footer {
+    background: rgba(10, 10, 10, 0.95);
+    border-top: 1px solid var(--terminal-border);
+    padding: 8px 20px;
+    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
+    font-size: 0.8rem;
+  }
+
+  .footer-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 100%;
+  }
+
+  .footer-left, .footer-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-muted);
+  }
+
+  .footer-separator {
+    color: var(--terminal-border);
+  }
+
+  .status-indicator {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: var(--primary-green);
+    border-radius: 50%;
+    margin-right: 6px;
+    animation: pulse 2s infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  /* Адаптивность */
+  @media (max-width: 768px) {
+    .minimal-footer {
+      padding: 6px 10px;
+      font-size: 0.7rem;
+    }
+
+    .footer-container {
+      flex-direction: column;
+      gap: 5px;
+      text-align: center;
+    }
+
+    .footer-left, .footer-right {
+      gap: 8px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/GlitchText.svelte b/src/lib/components/GlitchText.svelte
new file mode 100644
index 0000000..fdd9d8c
--- /dev/null
+++ b/src/lib/components/GlitchText.svelte
@@ -0,0 +1,58 @@
+<script>
+  export let text = '';
+  export let glitch = true;
+  export let size = '1rem';
+</script>
+
+<div class="glitch-text" class:no-glitch={!glitch} style="font-size: {size}">
+  <span class="glitch" data-text="{text}">{text}</span>
+  <span class="glitch glitch-2" data-text="{text}">{text}</span>
+  <span class="glitch glitch-3" data-text="{text}">{text}</span>
+</div>
+
+<style>
+  .glitch-text {
+    position: relative;
+    display: inline-block;
+  }
+
+  .glitch {
+    position: relative;
+    color: #fff;
+    text-shadow: 
+      0.05em 0 0 rgba(255, 0, 0, 0.75),
+      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
+      0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
+    animation: glitch 2s infinite;
+  }
+
+  .glitch-2 {
+    animation: glitch-2 3s infinite;
+    opacity: 0.8;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .glitch-3 {
+    animation: glitch-3 4s infinite;
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  @keyframes glitch {
+    0% { transform: translate(0); }
+    20% { transform: translate(-2px, 2px); }
+    40% { transform: translate(-2px, -2px); }
+    60% { transform: translate(2px, 2px); }
+    80% { transform: translate(2px, -2px); }
+    100% { transform: translate(0); }
+  }
+
+  .no-glitch .glitch {
+    animation: none;
+    text-shadow: none;
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/Loading.svelte b/src/lib/components/Loading.svelte
new file mode 100644
index 0000000..af608b3
--- /dev/null
+++ b/src/lib/components/Loading.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { Spinner } from '@sveltestrap/sveltestrap';
+</script>
+
+<div class="text-center my-5">
+  <Spinner color="primary" />
+</div>
diff --git a/src/lib/components/MarkdownRender.svelte b/src/lib/components/MarkdownRender.svelte
new file mode 100644
index 0000000..7bdde0e
--- /dev/null
+++ b/src/lib/components/MarkdownRender.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { marked } from 'marked';
+  import sanitizeHtml from 'sanitize-html';
+  export let content = '';
+
+  $: html = sanitizeHtml(marked.parse(content || ''));
+</script>
+
+<div class="prose lg:prose-xl" bind:this={el} {@html html}></div>
diff --git a/src/lib/components/Navigation.svelte b/src/lib/components/Navigation.svelte
new file mode 100644
index 0000000..1cd062b
--- /dev/null
+++ b/src/lib/components/Navigation.svelte
@@ -0,0 +1,257 @@
+<script>
+  import { onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+
+  const currentPath = writable('/');
+  const currentLanguage = writable('EN');
+  const isMobile = writable(false);
+
+  const paths = [
+    { href: '/', label: '~', icon: '🏠' },
+    { href: '/blog', label: 'blog', icon: '📝' },
+    { href: '/team', label: 'team', icon: '👥' },
+    { href: '/about', label: 'about', icon: 'ℹ️' },
+  ];
+
+  const languages = ['EN', 'RU', 'DE'];
+
+  onMount(() => {
+    isMobile.set(window.innerWidth < 768);
+    const handleResize = () => isMobile.set(window.innerWidth < 768);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  });
+
+  function setLanguage(lang) {
+    currentLanguage.set(lang);
+  }
+
+  onMount(() => {
+    function updateTime() {
+      const timeElement = document.getElementById('current-time');
+      if (timeElement) {
+        timeElement.textContent = new Date().toLocaleTimeString('en-US', { 
+          hour12: false,
+          hour: '2-digit',
+          minute: '2-digit'
+        });
+      }
+    }
+
+    updateTime();
+    const interval = setInterval(updateTime, 1000);
+
+    return () => clearInterval(interval);
+  });
+</script>
+
+<header class="waybar-header">
+  <div class="waybar-container">
+    <!-- Левая часть - Пути -->
+    <nav class="path-navigation">
+      {#each paths as path}
+        <a 
+          href={path.href} 
+          class:active={$currentPath === path.href}
+          class="path-item"
+        >
+          <span class="path-icon">{path.icon}</span>
+          <span class="path-label">{path.label}</span>
+        </a>
+      {/each}
+    </nav>
+
+    <!-- Центр - Логотип -->
+    <div class="waybar-center">
+      <div class="logo-container">
+        <span class="logo-brackets">[</span>
+        <span class="logo-number">58</span>
+        <span class="logo-brackets">]</span>
+        <span class="logo-text">Team</span>
+      </div>
+    </div>
+
+    <!-- Правая часть - Язык и время -->
+    <div class="waybar-right">
+      <div class="language-selector">
+        <button 
+          class="language-btn"
+          on:click={() => setLanguage(languages[(languages.indexOf($currentLanguage) + 1) % languages.length])}
+        >
+          <span class="language-flag">🌐</span>
+          <span class="language-code">{$currentLanguage}</span>
+        </button>
+      </div>
+      
+      <div class="time-display">
+        <span class="time" id="current-time">
+          {new Date().toLocaleTimeString('en-US', { hour12: false })}
+        </span>
+      </div>
+    </div>
+  </div>
+</header>
+
+<style>
+  .waybar-header {
+    background: rgba(10, 10, 10, 0.95);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--primary-green);
+    height: 50px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
+  }
+
+  .waybar-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    padding: 0 20px;
+    max-width: 100%;
+  }
+
+  .path-navigation {
+    display: flex;
+    gap: 2px;
+  }
+
+  .path-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    color: var(--text-secondary);
+    text-decoration: none;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+    border: 1px solid transparent;
+  }
+
+  .path-item:hover {
+    background: rgba(51, 255, 0, 0.1);
+    color: var(--primary-green);
+    border-color: var(--primary-green);
+  }
+
+  /*.path-item.active {
+    background: var(--primary-green);
+    color: var(--bg-dark);
+    font-weight: bold;
+  }*/
+
+  .path-icon {
+    font-size: 0.8rem;
+  }
+
+  .waybar-center {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .logo-container {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    font-weight: bold;
+    font-size: 1.1rem;
+  }
+
+  .logo-brackets {
+    color: var(--secondary-pink);
+  }
+
+  .logo-number {
+    color: var(--primary-green);
+  }
+
+  .logo-text {
+    color: var(--text-secondary);
+    margin-left: 4px;
+  }
+
+  .waybar-right {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+
+  .language-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    background: rgba(51, 255, 0, 0.1);
+    border: 1px solid var(--primary-green);
+    border-radius: 6px;
+    color: var(--primary-green);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-family: inherit;
+  }
+
+  .language-btn:hover {
+    background: var(--primary-green);
+    color: var(--bg-dark);
+  }
+
+  .time-display {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    padding: 4px 8px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    border: 1px solid var(--terminal-border);
+  }
+
+  /* Адаптивность */
+  @media (max-width: 768px) {
+    .waybar-container {
+      padding: 0 10px;
+    }
+
+    .path-label {
+      display: none;
+    }
+
+    .path-item {
+      padding: 8px;
+    }
+
+    .logo-container {
+      font-size: 1rem;
+    }
+
+    .language-code {
+      display: none;
+    }
+
+    .time {
+      font-size: 0.8rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .waybar-header {
+      height: 40px;
+    }
+
+    .path-item {
+      padding: 6px;
+    }
+
+    .logo-container {
+      font-size: 0.9rem;
+    }
+
+    .waybar-right {
+      gap: 8px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/RetroButton.svelte b/src/lib/components/RetroButton.svelte
new file mode 100644
index 0000000..65caf1b
--- /dev/null
+++ b/src/lib/components/RetroButton.svelte
@@ -0,0 +1,85 @@
+<script>
+  export let href = '';
+  export let type = 'button';
+  export let variant = 'primary';
+  export let disabled = false;
+</script>
+
+{#if href}
+  <a href={href} class="retro-button {variant}" class:disabled>
+    <span class="button-text"><slot /></span>
+    <span class="button-border"></span>
+  </a>
+{:else}
+  <button type={type} class="retro-button {variant}" class:disabled {disabled}>
+    <span class="button-text"><slot /></span>
+    <span class="button-border"></span>
+  </button>
+{/if}
+
+<style>
+  .retro-button {
+    position: relative;
+    display: inline-block;
+    padding: 12px 24px;
+    background: #000;
+    color: #33ff00;
+    border: none;
+    font-family: 'Courier New', monospace;
+    font-size: 16px;
+    text-transform: uppercase;
+    text-decoration: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .button-text {
+    position: relative;
+    z-index: 2;
+  }
+
+  .button-border {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    right: -4px;
+    bottom: -4px;
+    border: 2px solid #33ff00;
+    z-index: 1;
+    transition: all 0.3s ease;
+  }
+
+  .retro-button:hover .button-border {
+    top: -2px;
+    left: -2px;
+    right: 2px;
+    bottom: 2px;
+  }
+
+  .retro-button:active .button-border {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .retro-button.secondary {
+    color: #ff00ff;
+  }
+
+  .retro-button.secondary .button-border {
+    border-color: #ff00ff;
+  }
+
+  .retro-button.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .retro-button.disabled:hover .button-border {
+    top: 4px;
+    left: 4px;
+    right: -4px;
+    bottom: -4px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/Sections/BlogSection.svelte b/src/lib/components/Sections/BlogSection.svelte
new file mode 100644
index 0000000..6cb7e03
--- /dev/null
+++ b/src/lib/components/Sections/BlogSection.svelte
@@ -0,0 +1,84 @@
+<script>
+  import BlogCard from '$lib/components/BlogCard.svelte';
+  import GlitchText from '$lib/components/GlitchText.svelte';
+  import CRTScreen from '$lib/components/CRTScreen.svelte';
+
+  export let blogPosts = [];
+</script>
+
+<section class="blog-section">
+  <div class="section-title">
+    <GlitchText text="ПОСЛЕДНИЕ СТАТЬИ" size="2rem" />
+  </div>
+  
+  <div class="blog-container">
+    <CRTScreen class="blog-terminal">
+      <div class="terminal-header">
+        <span class="blink">█</span> LATEST BLOG POSTS
+      </div>
+      
+      <div class="posts-grid">
+        {#each blogPosts as post}
+          <BlogCard {post} />
+        {/each}
+      </div>
+      
+      <div class="terminal-footer">
+        <a href="/blog" class="view-all">Просмотреть все статьи →</a>
+      </div>
+    </CRTScreen>
+  </div>
+</section>
+
+<style>
+  .blog-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    background: #000;
+  }
+
+  .section-title {
+    margin-bottom: 40px;
+  }
+
+  .blog-container {
+    width: 100%;
+    max-width: 1200px;
+    height: 70vh;
+  }
+
+  .blog-terminal {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .posts-grid {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    padding: 20px;
+    overflow-y: auto;
+  }
+
+  .terminal-footer {
+    padding: 20px;
+    border-top: 1px solid #333;
+    text-align: center;
+  }
+
+  .view-all {
+    color: #ff00ff;
+    text-decoration: none;
+    font-size: 1.1rem;
+    font-weight: bold;
+  }
+
+  .view-all:hover {
+    text-decoration: underline;
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/Sections/HeroSection.svelte b/src/lib/components/Sections/HeroSection.svelte
new file mode 100644
index 0000000..7027807
--- /dev/null
+++ b/src/lib/components/Sections/HeroSection.svelte
@@ -0,0 +1,557 @@
+<script>
+  import { onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { Container, Row, Col } from '@sveltestrap/sveltestrap';
+  import GlitchText from '$lib/components/GlitchText.svelte';
+  import CRTScreen from '$lib/components/CRTScreen.svelte';
+
+  const slogans = [
+    "CODE LIKE IT'S 1999",
+    "RETRO FUTURE DEVELOPMENT", 
+    "GLITCH IS A FEATURE",
+    "VHS MEETS AI",
+    "OLD SCHOOL COOL",
+    "BYTE THE DUST"
+  ];
+
+  const currentSlogan = writable(slogans[0]);
+  const logLines = writable([]);
+  const systemStats = writable({});
+  const fileSystemLines = writable([]);
+
+  // ASCII логотип команды
+  const asciiLogo = `
+  ███████╗██████╗     ████████╗███████╗ █████╗ ███╗   ███╗
+  ██╔════╝██╔══██╗    ╚══██╔══╝██╔════╝██╔══██╗████╗ ████║
+  █████╗  ██████╔╝       ██║   █████╗  ███████║██╔████╔██║
+  ██╔══╝  ██╔══██╗       ██║   ██╔══╝  ██╔══██║██║╚██╔╝██║
+  ██║     ██║  ██║       ██║   ███████╗██║  ██║██║ ╚═╝ ██║
+  ╚═╝     ╚═╝  ╚═╝       ╚═╝   ╚══════╝╚═╝  ╚═╝╚═╝     ╚═╝
+  `.trim();
+
+  let sloganInterval;
+  let logInterval;
+  let statsInterval;
+  let fileSystemInterval;
+
+  onMount(() => {
+    // Смена слоганов
+    let sloganIndex = 0;
+    sloganInterval = setInterval(() => {
+      sloganIndex = (sloganIndex + 1) % slogans.length;
+      currentSlogan.set(slogans[sloganIndex]);
+    }, 3000);
+
+    // Генерация системных логов
+    const logMessages = [
+      "kernel: Initializing retro computing module...",
+      "systemd: Started VHS Effect Service",
+      "network: eth0: link up (1000 Mbps)",
+      "cpu: Frequency scaled to 3.8 GHz",
+      "memory: Allocating 2GB for glitch buffer",
+      "storage: SSD read: 3500 MB/s",
+      "gpu: Rendering 90s effects [OK]",
+      "audio: PCM 44100Hz stereo initialized"
+    ];
+
+    logInterval = setInterval(() => {
+      const randomLog = logMessages[Math.floor(Math.random() * logMessages.length)];
+      const timestamp = new Date().toLocaleTimeString();
+      logLines.update(lines => {
+        const newLines = [...lines, `[${timestamp}] ${randomLog}`];
+        return newLines.slice(-24);
+      });
+    }, 1200);
+
+    // Обновление системной статистики
+    statsInterval = setInterval(() => {
+      systemStats.set({
+        cpu: Math.floor(Math.random() * 30 + 10),
+        memory: Math.floor(Math.random() * 40 + 30),
+        disk: Math.floor(Math.random() * 20 + 10),
+        network: Math.floor(Math.random() * 100 + 50),
+        processes: Math.floor(Math.random() * 50 + 200),
+        uptime: "12d 4h 32m",
+        load: `${(Math.random() * 0.5 + 0.1).toFixed(2)}, ${(Math.random() * 0.4 + 0.08).toFixed(2)}, ${(Math.random() * 0.3 + 0.05).toFixed(2)}`
+      });
+    }, 5000);
+
+    // Генерация файловой системы
+    const fileSystemMessages = [
+      "/home/58team/projects/retro-blog/src/main.svelte [98%]",
+      "/var/log/system/performance.log [2.3MB]",
+      "/etc/config/retro-theme.conf [LOADED]",
+      "/usr/bin/glitch-renderer [RUNNING]",
+      "/tmp/cache/vhs-effects.bin [CACHED]",
+      "/mnt/data/blog-posts/2024/ [12 ITEMS]"
+    ];
+
+    fileSystemInterval = setInterval(() => {
+      const randomFile = fileSystemMessages[Math.floor(Math.random() * fileSystemMessages.length)];
+      fileSystemLines.update(lines => {
+        const newLines = [...lines, randomFile];
+        return newLines.slice(-6);
+      });
+    }, 1000);
+
+    return () => {
+      clearInterval(sloganInterval);
+      clearInterval(logInterval);
+      clearInterval(statsInterval);
+      clearInterval(fileSystemInterval);
+    };
+  });
+</script>
+
+<section class="hero-section">
+  <Container fluid class="h-100">
+    <Row class="h-100 g-3">
+      <!-- Левый столбец - Блоки 1 и 3 под друг другом -->
+      <Col lg={4} class="h-100">
+        <Row class="h-100 g-3">
+          <!-- Блок 1: Логи (верхний) -->
+          <Col class="h-50">
+            <div class="terminal-wrapper h-100">
+              <CRTScreen class="logs-terminal h-100">
+                <div class="terminal-header">
+                  <span class="blink">█</span> SYSTEM LOGS
+                </div>
+                <div class="terminal-body">
+                  <div class="logs-stream">
+                    {#each $logLines as line}
+                      <div class="log-line">
+                        <span class="log-time">[{new Date().toLocaleTimeString()}]</span>
+                        <span class="log-message">{line}</span>
+                      </div>
+                    {/each}
+                  </div>
+                </div>
+              </CRTScreen>
+            </div>
+          </Col>
+
+          <!-- Блок 3: Файловая система (нижний) -->
+          <Col class="h-50">
+            <div class="terminal-wrapper h-100">
+              <CRTScreen class="filesystem-terminal h-100">
+                <div class="terminal-header">
+                  <span class="blink">█</span> FILE SYSTEM
+                </div>
+                <div class="terminal-body">
+                  <div class="filesystem-stream">
+                    {#each $fileSystemLines as line}
+                      <div class="file-line">
+                        <span class="file-icon">📁</span>
+                        <span class="file-path">{line}</span>
+                        <span class="file-status">[ACTIVE]</span>
+                      </div>
+                    {/each}
+                  </div>
+                </div>
+              </CRTScreen>
+            </div>
+          </Col>
+        </Row>
+      </Col>
+
+      <!-- Правый столбец - Основной терминал -->
+      <Col lg={8} class="h-100">
+        <div class="terminal-wrapper h-100">
+          <CRTScreen class="main-terminal h-100">
+            <div class="terminal-header">
+              <span class="blink">█</span> [58] TEAM - SYSTEM STATUS
+            </div>
+            
+            <div class="terminal-body">
+              <!-- ASCII логотип -->
+              <div class="ascii-art text-center mb-3">
+                <pre class="ascii-logo">{asciiLogo}</pre>
+              </div>
+
+              <!-- Слоган -->
+              <div class="slogan-container mb-3">
+                <div class="command-line">
+                  <span class="user">team@58server</span>
+                  <span class="path">:~$</span>
+                  <span class="command">echo "{@html $currentSlogan.replace(/ /g, '&nbsp;')}"</span>
+                </div>
+                <div class="output-line">
+                  <span class="output">{$currentSlogan}</span>
+                </div>
+              </div>
+
+              <!-- Системная информация -->
+              <div class="system-monitor mb-3">
+                <div class="monitor-header d-flex justify-content-between">
+                  <span class="title">SYSTEM RESOURCES</span>
+                  <span class="refresh">REFRESH: 5s</span>
+                </div>
+
+                <div class="stats-grid">
+                  <!-- CPU -->
+                  <div class="stat-row d-flex align-items-center gap-2">
+                    <span class="stat-label">CPU:</span>
+                    <div class="progress flex-grow-1">
+                      <div class="progress-bar bg-success" style="width: {$systemStats.cpu}%"></div>
+                    </div>
+                    <span class="stat-value">{$systemStats.cpu}%</span>
+                  </div>
+
+                  <!-- Memory -->
+                  <div class="stat-row d-flex align-items-center gap-2">
+                    <span class="stat-label">MEM:</span>
+                    <div class="progress flex-grow-1">
+                      <div class="progress-bar bg-info" style="width: {$systemStats.memory}%"></div>
+                    </div>
+                    <span class="stat-value">{$systemStats.memory}%</span>
+                  </div>
+
+                  <!-- Disk -->
+                  <div class="stat-row d-flex align-items-center gap-2">
+                    <span class="stat-label">DISK:</span>
+                    <div class="progress flex-grow-1">
+                      <div class="progress-bar bg-warning" style="width: {$systemStats.disk}%"></div>
+                    </div>
+                    <span class="stat-value">{$systemStats.disk}%</span>
+                  </div>
+
+                  <!-- Network -->
+                  <div class="stat-row d-flex align-items-center gap-2">
+                    <span class="stat-label">NET:</span>
+                    <span class="stat-value">{$systemStats.network} Mbps</span>
+                  </div>
+
+                  <!-- Processes -->
+                  <div class="stat-row d-flex align-items-center gap-2">
+                    <span class="stat-label">PROC:</span>
+                    <span class="stat-value">{$systemStats.processes}</span>
+                  </div>
+
+                  <!-- Uptime -->
+                  <div class="stat-row d-flex align-items-center gap-2">
+                    <span class="stat-label">UPTIME:</span>
+                    <span class="stat-value">{$systemStats.uptime}</span>
+                  </div>
+
+                  <!-- Load -->
+                  <div class="stat-row d-flex align-items-center gap-2">
+                    <span class="stat-label">LOAD:</span>
+                    <span class="stat-value">{$systemStats.load}</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Статус сервисов -->
+              <div class="services-status">
+                <div class="service-item d-flex justify-content-between">
+                  <span class="service-name">Web Server</span>
+                  <span class="service-status running">● RUNNING</span>
+                </div>
+                <div class="service-item d-flex justify-content-between">
+                  <span class="service-name">Database</span>
+                  <span class="service-status running">● RUNNING</span>
+                </div>
+                <div class="service-item d-flex justify-content-between">
+                  <span class="service-name">Cache</span>
+                  <span class="service-status running">● RUNNING</span>
+                </div>
+              </div>
+            </div>
+          </CRTScreen>
+        </div>
+      </Col>
+    </Row>
+  </Container>
+</section>
+
+<style>
+  .hero-section {
+    height: 100vh;
+    background: var(--bg-dark);
+    padding: 20px;
+    overflow: hidden;
+  }
+
+  .terminal-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Фиксированные размеры терминалов */
+  .logs-terminal,
+  .main-terminal,
+  .filesystem-terminal {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .terminal-header {
+    background: var(--primary-green);
+    color: var(--bg-dark);
+    padding: 12px;
+    font-weight: bold;
+    border-bottom: 2px solid var(--bg-dark);
+    font-size: 0.9rem;
+    font-family: 'Courier New', monospace;
+    flex-shrink: 0;
+  }
+
+  .terminal-body {
+    flex: 1;
+    padding: 15px;
+    overflow: auto;
+    background: rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Стили для основного терминала */
+  .ascii-logo pre {
+    color: var(--primary-green);
+    font-family: 'Courier New', monospace;
+    font-size: 12px;
+    line-height: 1.1;
+    margin: 0;
+  }
+
+  .slogan-container {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    padding: 15px;
+    border-radius: 5px;
+  }
+
+  .command-line {
+    color: var(--secondary-pink);
+    font-family: 'Courier New', monospace;
+    margin-bottom: 5px;
+    font-size: 0.9rem;
+  }
+
+  .user {
+    color: var(--accent-blue);
+    font-weight: bold;
+  }
+
+  .path {
+    color: var(--primary-green);
+  }
+
+  .command {
+    color: var(--text-secondary);
+  }
+
+  .output-line {
+    color: var(--primary-green);
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+  }
+
+  .system-monitor {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    padding: 15px;
+    border-radius: 5px;
+  }
+
+  .monitor-header {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    margin-bottom: 15px;
+  }
+
+  .stats-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .stat-row {
+    font-size: 0.9rem;
+  }
+
+  .stat-label {
+    color: var(--text-muted);
+    min-width: 50px;
+    font-weight: bold;
+  }
+
+  .stat-value {
+    color: var(--primary-green);
+    font-weight: bold;
+    min-width: 60px;
+    text-align: right;
+  }
+
+  /* Стили для логов */
+  .logs-stream {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .log-line {
+    color: var(--primary-green);
+    font-family: 'Courier New', monospace;
+    font-size: 0.8rem;
+    margin-bottom: 6px;
+    opacity: 0;
+    animation: logAppear 0.5s ease forwards, logScroll 12s linear forwards;
+  }
+
+  .log-time {
+    color: var(--text-muted);
+    margin-right: 8px;
+    font-size: 0.7rem;
+  }
+
+  /* Стили для файловой системы */
+  .filesystem-stream {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .file-line {
+    color: var(--primary-green);
+    font-family: 'Courier New', monospace;
+    font-size: 0.8rem;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    opacity: 0;
+    animation: logAppear 0.5s ease forwards, logScroll 10s linear forwards;
+  }
+
+  .file-icon {
+    font-size: 0.9rem;
+  }
+
+  .file-path {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-status {
+    color: var(--secondary-pink);
+    font-size: 0.7rem;
+    flex-shrink: 0;
+  }
+
+  /* Статус сервисов */
+  .services-status {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    padding: 10px;
+    border-radius: 5px;
+  }
+
+  .service-item {
+    margin-bottom: 6px;
+    font-size: 0.9rem;
+  }
+
+  .service-name {
+    color: var(--text-muted);
+  }
+
+  .service-status {
+    font-weight: bold;
+  }
+
+  .service-status.running {
+    color: var(--primary-green);
+  }
+
+  /* Анимации */
+  @keyframes logAppear {
+    to {
+      opacity: 0.9;
+    }
+  }
+
+  @keyframes logScroll {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(-100%);
+    }
+  }
+
+  /* Адаптивность */
+  @media (max-width: 992px) {
+    .hero-section {
+      padding: 15px;
+    }
+
+    .terminal-body {
+      padding: 12px;
+    }
+
+    .ascii-logo pre {
+      font-size: 10px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .hero-section {
+      height: auto;
+      min-height: 100vh;
+      padding: 10px;
+    }
+
+    /* На мобильных - вертикальное расположение */
+    .h-50 {
+      height: 300px !important;
+    }
+
+    .terminal-wrapper {
+      margin-bottom: 15px;
+    }
+
+    .ascii-logo pre {
+      font-size: 8px;
+    }
+
+    .terminal-header {
+      padding: 10px;
+      font-size: 0.8rem;
+    }
+
+    .terminal-body {
+      padding: 10px;
+    }
+  }
+
+  @media (max-width: 576px) {
+    .ascii-logo pre {
+      font-size: 6px;
+    }
+
+    .slogan-container {
+      padding: 10px;
+    }
+
+    .system-monitor {
+      padding: 10px;
+    }
+
+    .stat-row {
+      font-size: 0.8rem;
+    }
+
+    .stat-label {
+      min-width: 40px;
+    }
+
+    .stat-value {
+      min-width: 50px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/Sections/ProjectsSection.svelte b/src/lib/components/Sections/ProjectsSection.svelte
new file mode 100644
index 0000000..c3daf9c
--- /dev/null
+++ b/src/lib/components/Sections/ProjectsSection.svelte
@@ -0,0 +1,161 @@
+<script>
+  import GlitchText from '$lib/components/GlitchText.svelte';
+  import CRTScreen from '$lib/components/CRTScreen.svelte';
+
+  export let projects = [];
+</script>
+
+<section class="projects-section">
+  <div class="section-title">
+    <GlitchText text="НАШИ ПРОЕКТЫ" size="2rem" />
+  </div>
+  
+  <div class="projects-container">
+    <CRTScreen class="projects-terminal">
+      <div class="terminal-header">
+        <span class="blink">█</span> ACTIVE PROJECTS
+      </div>
+      
+      <div class="projects-grid">
+        {#each projects as project}
+          <div class="project-card">
+            <div class="project-header">
+              <h3 class="project-name">{project.name}</h3>
+              <span class:project-status={project.status.toLowerCase()}>
+                {project.status}
+              </span>
+            </div>
+            
+            <p class="project-description">{project.description}</p>
+            
+            <div class="project-tech">
+              {#each project.tech as tech}
+                <span class="tech-tag">{tech}</span>
+              {/each}
+            </div>
+            
+            <div class="project-meta">
+              <span class="project-year">{project.year}</span>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </CRTScreen>
+  </div>
+</section>
+
+<style>
+  .projects-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    background: #111;
+  }
+
+  .section-title {
+    margin-bottom: 40px;
+  }
+
+  .projects-container {
+    width: 100%;
+    max-width: 1200px;
+    height: 70vh;
+  }
+
+  .projects-terminal {
+    height: 100%;
+  }
+
+  .projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 20px;
+    padding: 20px;
+    height: calc(100% - 60px);
+    overflow-y: auto;
+  }
+
+  .project-card {
+    background: rgba(0, 0, 0, 0.5);
+    border: 1px solid #33ff00;
+    padding: 20px;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+  }
+
+  .project-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 0 20px rgba(51, 255, 0, 0.3);
+  }
+
+  .project-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+  }
+
+  .project-name {
+    color: #33ff00;
+    font-size: 1.2rem;
+    margin: 0;
+  }
+
+  .project-status {
+    padding: 4px 8px;
+    border-radius: 3px;
+    font-size: 0.8rem;
+    font-weight: bold;
+  }
+
+  .project-status.completed {
+    background: rgba(51, 255, 0, 0.2);
+    color: #33ff00;
+    border: 1px solid #33ff00;
+  }
+
+  .project-status.in-progress {
+    background: rgba(255, 255, 0, 0.2);
+    color: #ffff00;
+    border: 1px solid #ffff00;
+  }
+
+  .project-status.planning {
+    background: rgba(255, 0, 255, 0.2);
+    color: #ff00ff;
+    border: 1px solid #ff00ff;
+  }
+
+  .project-description {
+    color: #ccc;
+    line-height: 1.5;
+    margin-bottom: 15px;
+  }
+
+  .project-tech {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 15px;
+  }
+
+  .tech-tag {
+    background: rgba(255, 0, 255, 0.2);
+    color: #ff00ff;
+    padding: 3px 8px;
+    border-radius: 3px;
+    font-size: 0.8rem;
+    border: 1px solid #ff00ff;
+  }
+
+  .project-meta {
+    text-align: right;
+  }
+
+  .project-year {
+    color: #888;
+    font-size: 0.9rem;
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/Sections/TeamSection.svelte b/src/lib/components/Sections/TeamSection.svelte
new file mode 100644
index 0000000..b84de2d
--- /dev/null
+++ b/src/lib/components/Sections/TeamSection.svelte
@@ -0,0 +1,622 @@
+<script>
+  import { onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { Container, Row, Col } from '@sveltestrap/sveltestrap';
+  import GlitchText from '$lib/components/GlitchText.svelte';
+  import CRTScreen from '$lib/components/CRTScreen.svelte';
+
+  const teamStructure = {
+    name: "[58] TEAM",
+    type: "directory",
+    children: [
+      {
+        name: "development",
+        type: "directory",
+        children: [
+          {
+            name: "frontend",
+            type: "directory", 
+            children: [
+              { 
+                name: "alexey.md", 
+                type: "file", 
+                member: {
+                  id: "1",
+                  name: "Алексей Петров",
+                  role: "Lead Frontend Developer",
+                  avatar: "",
+                  bio: "Специалист по Svelte и веб-разработке. Любит чистый код и кофе.",
+                  skills: ["Svelte", "JavaScript", "Vue", "React"],
+                  articles: [
+                    { title: "Svelte для начинающих", date: "2024-01-15", views: 1243 },
+                    { title: "Оптимизация производительности", date: "2024-01-10", views: 876 },
+                    { title: "TypeScript лучшие практики", date: "2024-01-05", views: 954 }
+                  ]
+                }
+              },
+              { 
+                name: "maria.md", 
+                type: "file", 
+                member: {
+                  id: "2",
+                  name: "Мария Сидорова",
+                  role: "UI/UX Developer",
+                  avatar: "",
+                  bio: "Создает интерфейсы которые нравятся пользователям. Верит в силу дизайна.",
+                  skills: ["Figma", "CSS", "Sass", "UI Design"],
+                  articles: [
+                    { title: "Дизайн системы в 2024", date: "2024-01-14", views: 1102 },
+                    { title: "Анимации в вебе", date: "2024-01-09", views: 723 },
+                    { title: "Цветовые палитры", date: "2024-01-04", views: 645 }
+                  ]
+                }
+              }
+            ]
+          },
+          {
+            name: "backend", 
+            type: "directory",
+            children: [
+              { 
+                name: "ivan.md", 
+                type: "file", 
+                member: {
+                  id: "3",
+                  name: "Иван Козлов",
+                  role: "Backend Lead",
+                  avatar: "",
+                  bio: "Работает с базами данных и API. Любит сложные задачи.",
+                  skills: ["Node.js", "Python", "PostgreSQL", "Docker"],
+                  articles: [
+                    { title: "REST API лучшие практики", date: "2024-01-13", views: 987 },
+                    { title: "Базы данных для начинающих", date: "2024-01-08", views: 834 },
+                    { title: "Микросервисная архитектура", date: "2024-01-03", views: 1123 }
+                  ]
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        name: "design",
+        type: "directory",
+        children: [
+          { 
+            name: "anna.md", 
+            type: "file", 
+            member: {
+              id: "4",
+              name: "Анна Волкова",
+              role: "Creative Director",
+              avatar: "",
+              bio: "Pixel perfectionist с любовью к ретро стилю.",
+              skills: ["Figma", "Photoshop", "Illustrator", "Blender"],
+              articles: [
+                { title: "Ретро дизайн в 2024", date: "2024-01-12", views: 1456 },
+                { title: "3D в веб дизайне", date: "2024-01-07", views: 678 },
+                { title: "Шрифты и типографика", date: "2024-01-02", views: 789 }
+              ]
+            }
+          }
+        ]
+      }
+    ]
+  };
+
+  const selectedMember = writable(null);
+  const expandedFolders = writable(new Set(['development', 'design']));
+  const isMobile = writable(false);
+
+  onMount(() => {
+    isMobile.set(window.innerWidth < 768);
+    const handleResize = () => isMobile.set(window.innerWidth < 768);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  });
+
+  function toggleFolder(folderName) {
+    expandedFolders.update(set => {
+      const newSet = new Set(set);
+      newSet.has(folderName) ? newSet.delete(folderName) : newSet.add(folderName);
+      return newSet;
+    });
+  }
+
+  function selectMember(member) {
+    selectedMember.set(member);
+  }
+
+  function isExpanded(folderName) {
+    return $expandedFolders.has(folderName);
+  }
+
+  function formatDate(dateString) {
+    return new Date(dateString).toLocaleDateString('ru-RU');
+  }
+</script>
+
+<section class="team-section">
+  <div class="section-title">
+    <GlitchText text="TEAM DIRECTORY" size="2rem" />
+  </div>
+  
+  <Container fluid>
+    <Row class="g-3">
+      <Col lg={4} class="terminal-col">
+        <div class="terminal-wrapper h-100">
+          <CRTScreen class="directory-terminal h-100">
+            <div class="terminal-header">
+              <span class="blink">█</span> TEAM STRUCTURE
+            </div>
+            
+            <div class="terminal-body">
+              <div class="directory-tree">
+                <div class="tree-item directory root" on:click={() => toggleFolder('root')}>
+                  <span class="folder-icon">{isExpanded('root') ? '📂' : '📁'}</span>
+                  <span class="item-name">[58] TEAM/</span>
+                </div>
+
+                {#each teamStructure.children as department}
+                  <div class="tree-branch">
+                    <div class="tree-item directory" on:click={() => toggleFolder(department.name)}>
+                      <span class="folder-icon">{isExpanded(department.name) ? '📂' : '📁'}</span>
+                      <span class="item-name">{department.name}/</span>
+                    </div>
+
+                    {#if isExpanded(department.name)}
+                      {#each department.children as team}
+                        <div class="tree-sub-branch">
+                          <div class="tree-item directory" on:click={() => toggleFolder(team.name)}>
+                            <span class="folder-icon">{isExpanded(team.name) ? '📂' : '📁'}</span>
+                            <span class="item-name">{team.name}/</span>
+                          </div>
+
+                          {#if isExpanded(team.name)}
+                            {#each team.children as member}
+                              <div class="tree-item file" on:click={() => selectMember(member.member)}>
+                                <span class="file-icon">📄</span>
+                                <span class="item-name">{member.name}</span>
+                              </div>
+                            {/each}
+                          {/if}
+                        </div>
+                      {/each}
+                    {/if}
+                  </div>
+                {/each}
+              </div>
+
+              <div class="terminal-footer">
+                <div class="footer-stats">
+                  <span class="stat">Members: 4</span>
+                  <span class="stat">Articles: 12</span>
+                </div>
+              </div>
+            </div>
+          </CRTScreen>
+        </div>
+      </Col>
+
+      <Col lg={8} class="terminal-col">
+        <div class="terminal-wrapper h-100">
+          <CRTScreen class="member-terminal h-100">
+            <div class="terminal-header">
+              <span class="blink">█</span> 
+              {#if $selectedMember}
+                MEMBER PROFILE: {$selectedMember.name}
+              {:else}
+                SELECT TEAM MEMBER
+              {/if}
+            </div>
+            
+            <div class="terminal-body">
+              {#if $selectedMember}
+                <div class="member-header">
+                  <h3 class="member-name">{$selectedMember.name}</h3>
+                  <p class="member-role">{$selectedMember.role}</p>
+                  <p class="member-bio">{$selectedMember.bio}</p>
+                </div>
+
+                <div class="member-skills">
+                  <h4 class="section-title">SKILLS:</h4>
+                  <div class="skills-grid">
+                    {#each $selectedMember.skills as skill}
+                      <span class="skill-tag">{skill}</span>
+                    {/each}
+                  </div>
+                </div>
+
+                <div class="member-articles">
+                  <h4 class="section-title">LATEST ARTICLES:</h4>
+                  <div class="articles-list">
+                    {#each $selectedMember.articles as article, index}
+                      <div class="article-item">
+                        <div class="article-header">
+                          <span class="article-number">[{index + 1}]</span>
+                          <span class="article-title">{article.title}</span>
+                        </div>
+                        <div class="article-meta">
+                          <span class="article-date">{formatDate(article.date)}</span>
+                          <span class="article-views">👁️{article.views}</span>
+                        </div>
+                      </div>
+                    {/each}
+                  </div>
+                </div>
+
+                <div class="member-stats">
+                  <h4 class="section-title">STATISTICS:</h4>
+                  <div class="stats-grid">
+                    <div class="stat-item">
+                      <span class="stat-label">Articles:</span>
+                      <span class="stat-value">{$selectedMember.articles.length}</span>
+                    </div>
+                    <div class="stat-item">
+                      <span class="stat-label">Total Views:</span>
+                      <span class="stat-value">
+                        {$selectedMember.articles.reduce((sum, article) => sum + article.views, 0).toLocaleString()}
+                      </span>
+                    </div>
+                    <div class="stat-item">
+                      <span class="stat-label">Avg. Views:</span>
+                      <span class="stat-value">
+                        {Math.round($selectedMember.articles.reduce((sum, article) => sum + article.views, 0) / $selectedMember.articles.length).toLocaleString()}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+              {:else}
+                <div class="no-selection">
+                  <div class="terminal-message">
+                    <pre class="ascii-art">
+╔══════════════════════════════════════════════╗
+║                                              ║
+║   Select a team member from the directory    ║
+║   to view their profile and latest articles  ║
+║                                              ║
+║   Use the file tree on the left to navigate  ║
+║   through our team structure                 ║
+║                                              ║
+╚══════════════════════════════════════════════╝
+                    </pre>
+                  </div>
+                </div>
+              {/if}
+            </div>
+          </CRTScreen>
+        </div>
+      </Col>
+    </Row>
+  </Container>
+</section>
+
+<style>
+  .team-section {
+    min-height: 100vh;
+    padding: 40px 20px;
+    background: var(--bg-darker);
+  }
+
+  .section-title {
+    text-align: center;
+    margin-bottom: 30px;
+  }
+
+  .terminal-col {
+    height: 70vh;
+  }
+
+  .terminal-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .directory-terminal, .member-terminal {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .terminal-header {
+    background: var(--primary-green);
+    color: var(--bg-dark);
+    padding: 12px;
+    font-weight: bold;
+    border-bottom: 2px solid var(--bg-dark);
+    font-size: 0.9rem;
+    font-family: 'Courier New', monospace;
+    flex-shrink: 0;
+  }
+
+  .terminal-body {
+    flex: 1;
+    padding: 20px;
+    overflow: auto;
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  /* Дерево директорий */
+  .directory-tree {
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+    line-height: 1.6;
+  }
+
+  .tree-branch {
+    margin-left: 20px;
+  }
+
+  .tree-sub-branch {
+    margin-left: 25px;
+  }
+
+  .tree-item {
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 3px;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .tree-item:hover {
+    background: rgba(51, 255, 0, 0.1);
+  }
+
+  .tree-item.directory {
+    color: var(--primary-green);
+    font-weight: bold;
+  }
+
+  .tree-item.file {
+    color: var(--text-secondary);
+  }
+
+  .tree-item.root {
+    color: var(--secondary-pink);
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+
+  .folder-icon, .file-icon {
+    font-size: 1rem;
+  }
+
+  .terminal-footer {
+    margin-top: 20px;
+    padding-top: 15px;
+    border-top: 1px solid var(--terminal-border);
+  }
+
+  .footer-stats {
+    display: flex;
+    justify-content: space-around;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+  }
+
+  /* Информация о сотруднике */
+  .member-header {
+    margin-bottom: 25px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid var(--terminal-border);
+  }
+
+  .member-name {
+    color: var(--primary-green);
+    font-size: 1.8rem;
+    margin-bottom: 8px;
+  }
+
+  .member-role {
+    color: var(--secondary-pink);
+    font-size: 1.1rem;
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+
+  .member-bio {
+    color: var(--text-secondary);
+    line-height: 1.6;
+    font-size: 0.95rem;
+  }
+
+  .section-title {
+    color: var(--primary-green);
+    font-size: 1.1rem;
+    margin-bottom: 15px;
+    font-weight: bold;
+  }
+
+  .skills-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 25px;
+  }
+
+  .skill-tag {
+    background: rgba(51, 255, 0, 0.2);
+    color: var(--primary-green);
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 0.85rem;
+    border: 1px solid var(--terminal-border);
+    font-family: 'Courier New', monospace;
+  }
+
+  .articles-list {
+    margin-bottom: 25px;
+  }
+
+  .article-item {
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--terminal-border);
+    border-radius: 4px;
+    padding: 12px;
+    margin-bottom: 10px;
+    transition: all 0.3s ease;
+  }
+
+  .article-item:hover {
+    background: rgba(51, 255, 0, 0.1);
+    transform: translateX(5px);
+  }
+
+  .article-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+  }
+
+  .article-number {
+    color: var(--secondary-pink);
+    font-weight: bold;
+    font-family: 'Courier New', monospace;
+  }
+
+  .article-title {
+    color: var(--text-secondary);
+    font-weight: 500;
+    flex: 1;
+  }
+
+  .article-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+  }
+
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 15px;
+  }
+
+  .stat-item {
+    background: rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--terminal-border);
+    border-radius: 4px;
+    padding: 12px;
+    text-align: center;
+  }
+
+  .stat-label {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  .stat-value {
+    color: var(--primary-green);
+    font-weight: bold;
+    font-size: 1.1rem;
+  }
+
+  /* Сообщение при отсутствии выбора */
+  .no-selection {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .terminal-message {
+    text-align: center;
+  }
+
+  .ascii-art pre {
+    color: var(--primary-green);
+    font-family: 'Courier New', monospace;
+    font-size: 10px;
+    line-height: 1.2;
+    margin: 0;
+  }
+
+  /* Адаптивность */
+  @media (max-width: 992px) {
+    .terminal-col {
+      height: 50vh;
+    }
+
+    .member-name {
+      font-size: 1.5rem;
+    }
+
+    .stats-grid {
+      grid-template-columns: 1fr;
+      gap: 10px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .team-section {
+      padding: 20px 15px;
+    }
+
+    .terminal-col {
+      height: 400px;
+      margin-bottom: 20px;
+    }
+
+    .terminal-body {
+      padding: 15px;
+    }
+
+    .tree-branch {
+      margin-left: 15px;
+    }
+
+    .tree-sub-branch {
+      margin-left: 20px;
+    }
+
+    .member-name {
+      font-size: 1.3rem;
+    }
+
+    .skills-grid {
+      gap: 6px;
+    }
+
+    .skill-tag {
+      padding: 4px 8px;
+      font-size: 0.8rem;
+    }
+
+    .ascii-art pre {
+      font-size: 8px;
+    }
+  }
+
+  @media (max-width: 576px) {
+    .terminal-col {
+      height: 350px;
+    }
+
+    .terminal-body {
+      padding: 10px;
+    }
+
+    .member-name {
+      font-size: 1.2rem;
+    }
+
+    .article-header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 5px;
+    }
+
+    .ascii-art pre {
+      font-size: 6px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/TeamCard.svelte b/src/lib/components/TeamCard.svelte
new file mode 100644
index 0000000..d1a0be1
--- /dev/null
+++ b/src/lib/components/TeamCard.svelte
@@ -0,0 +1,95 @@
+<script>
+  import GlitchText from './GlitchText.svelte';
+  import CRTScreen from './CRTScreen.svelte';
+
+  export let member = {
+    id: '',
+    name: '',
+    role: '',
+    avatar: '',
+    bio: ''
+  };
+</script>
+
+<CRTScreen class="team-card">
+  <div class="card-content">
+    <div class="avatar">
+      {#if member.avatar}
+        <img src={member.avatar} alt={member.name} />
+      {:else}
+        <div class="avatar-placeholder">👤</div>
+      {/if}
+    </div>
+    
+    <h3 class="member-name">
+      <GlitchText text={member.name} size="1.1rem" />
+    </h3>
+    
+    <p class="member-role">{member.role}</p>
+    
+    <p class="member-bio">{member.bio}</p>
+    
+    <div class="card-actions">
+      <a href={`/team/${member.id}`} class="view-profile">Профиль →</a>
+    </div>
+  </div>
+</CRTScreen>
+
+<style>
+  .team-card {
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  .avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    margin: 0 auto 15px;
+    overflow: hidden;
+    border: 2px solid #33ff00;
+  }
+
+  .avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .avatar-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    background: #222;
+  }
+
+  .member-name {
+    margin: 0 0 5px 0;
+    color: #33ff00;
+  }
+
+  .member-role {
+    color: #ff00ff;
+    margin: 0 0 10px 0;
+    font-weight: bold;
+  }
+
+  .member-bio {
+    color: #ccc;
+    font-size: 0.9rem;
+    line-height: 1.4;
+    margin-bottom: 15px;
+  }
+
+  .view-profile {
+    color: #ff00ff;
+    text-decoration: none;
+  }
+
+  .view-profile:hover {
+    text-decoration: underline;
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/config.js b/src/lib/config.js
new file mode 100644
index 0000000..5b2cc98
--- /dev/null
+++ b/src/lib/config.js
@@ -0,0 +1,43 @@
+export const siteConfig = {
+  title: 'DevTeam Blog',
+  description: 'Блог команды разработчиков о технологиях и разработке',
+  baseUrl: import.meta.env.VITE_BASE_URL || 'http://localhost:5173',
+  apiUrl: import.meta.env.VITE_API_URL || 'http://localhost:3000/api',
+  
+  team: [
+    {
+      id: 1,
+      name: 'Иван Иванов',
+      position: 'Senior Frontend Developer'
+    },
+    {
+      id: 2,
+      name: 'Петр Петров', 
+      position: 'Fullstack Developer'
+    },
+    {
+      id: 3,
+      name: 'Мария Сидорova',
+      position: 'UI/UX Designer'
+    },
+    {
+      id: 4,
+      name: 'Алексей Смирнов',
+      position: 'DevOps Engineer'
+    }
+  ],
+  
+  socialLinks: {
+    github: 'https://github.com/devteam',
+    twitter: 'https://twitter.com/devteam',
+    linkedin: 'https://linkedin.com/company/devteam'
+  },
+  
+  features: [
+    'Веб-разработка',
+    'Мобильные приложения',
+    'UI/UX дизайн',
+    'DevOps и инфраструктура',
+    'Консалтинг и аудит'
+  ]
+};
\ No newline at end of file
diff --git a/src/lib/index.js b/src/lib/index.js
new file mode 100644
index 0000000..47d3c46
--- /dev/null
+++ b/src/lib/index.js
@@ -0,0 +1 @@
+// Reexport your entry components here
diff --git a/src/lib/services/api.js b/src/lib/services/api.js
new file mode 100644
index 0000000..46c46d1
--- /dev/null
+++ b/src/lib/services/api.js
@@ -0,0 +1,20 @@
+import axios from "axios";
+const API_BASE_URL = 'http://localhost:3000/api';
+
+const apiClient = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  }
+});
+
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    console.error('API Error:', error);
+    throw error;
+  }
+);
+
+export default apiClient;
\ No newline at end of file
diff --git a/src/lib/services/blogService.js b/src/lib/services/blogService.js
new file mode 100644
index 0000000..af9dc94
--- /dev/null
+++ b/src/lib/services/blogService.js
@@ -0,0 +1,164 @@
+import apiClient from './api.js';
+
+export const blogService = {
+  // Получить все статьи
+  async getBlogPosts(params = {}) {
+    try {
+      const response = await apiClient.get('/posts', { params });
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching blog posts:', error);
+      return getMockBlogPosts();
+    }
+  },
+
+  // Получить статью по ID
+async getPostById(id) {
+  try {
+    const response = await apiClient.get(`/posts/${id}`);
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching post:', error);
+    return getMockBlogPosts().find(post => post.id === id) || null;
+  }
+},
+
+  // Получить статьи по категории
+  async getPostsByCategory(category, params = {}) {
+    try {
+      const response = await apiClient.get('/posts', {
+        params: { category, ...params }
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching posts by category:', error);
+      return getMockBlogPosts().filter(post => post.category === category);
+    }
+  },
+
+  // Получить статьи по тегу
+  async getPostsByTag(tag, params = {}) {
+    try {
+      const response = await apiClient.get('/posts', {
+        params: { tag, ...params }
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching posts by tag:', error);
+      return getMockBlogPosts().filter(post => post.tags.includes(tag));
+    }
+  },
+
+  // Получить статьи по автору
+  async getPostsByAuthor(username, params = {}) {
+    try {
+      const response = await apiClient.get('/posts', {
+        params: { username, ...params }
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching posts by author:', error);
+      return getMockBlogPosts().filter(post => post.username === username);
+    }
+  },
+
+  // Получить метаданные для фильтров
+  async getBlogMetadata() {
+    try {
+      const posts = await this.getBlogPosts();
+      return generateMetadataFromPosts(posts);
+    } catch (error) {
+      console.error('Error fetching blog metadata:', error);
+      return generateMetadataFromPosts(getMockBlogPosts());
+    }
+  }
+};
+
+// Генерация метаданных из списка постов
+function generateMetadataFromPosts(posts) {
+  const categories = [...new Set(posts.map(post => post.category))];
+  const tags = [...new Set(posts.flatMap(post => post.tags || []))];
+  const authors = [...new Set(posts.map(post => post.username))];
+  
+  return {
+    categories: categories.map(cat => ({
+      name: cat,
+      count: posts.filter(post => post.category === cat).length
+    })),
+    tags: tags.map(tag => ({
+      name: tag,
+      count: posts.filter(post => post.tags && post.tags.includes(tag)).length
+    })),
+    authors: authors.map(author => ({
+      name: author,
+      count: posts.filter(post => post.username === author).length
+    })),
+    totalPosts: posts.length
+  };
+}
+
+// Mock данные соответствующие новой структуре API
+function getMockBlogPosts() {
+  return [
+    {
+      id: "1",
+      title: "Svelte 5: Полное руководство",
+      description: "Изучите все нововведения в Svelte 5, включая runes и улучшенную реактивность",
+      category: "frontend",
+      tags: ["svelte", "javascript", "frontend"],
+      username: "Алексей Петров",
+      content: "adasdasdasdasd",
+      updatedAt: "2024-01-20T10:00:00Z"
+    },
+    {
+      id: "2",
+      title: "Ретро дизайн в 2024 году",
+      description: "Как использовать эстетику 90-х в современных веб-проектах",
+      category: "design",
+      tags: ["design", "retro", "ui/ux"],
+      username: "Мария Сидорова",
+      content: "adasdasdasdasd",
+      updatedAt: "2024-01-18T14:30:00Z"
+    },
+    {
+      id: "3",
+      title: "Лучшие практики безопасности API",
+      description: "Полное руководство по защите вашего API от уязвимостей",
+      category: "backend",
+      tags: ["security", "api", "backend"],
+      username: "Иван Козлов",
+      content: "adasdasdasdasd",
+      updatedAt: "2024-01-15T09:15:00Z"
+    },
+    {
+      id: "4",
+      title: "Оптимизация производительности веб-приложений",
+      description: "Современные техники для ускорения загрузки и отзывчивости",
+      category: "frontend",
+      tags: ["performance", "optimization", "javascript"],
+      username: "Алексей Петров",
+      content: "adasdasdasdasd",
+      updatedAt: "2024-01-12T16:45:00Z"
+    },
+    {
+      id: "5",
+      title: "Docker для веб-разработчиков",
+      description: "Практическое руководство по контейнеризации приложений",
+      category: "devops",
+      tags: ["docker", "devops", "containers"],
+      content: "adasdasdasdasd",
+      username: "Иван Козлов",
+      updatedAt: "2024-01-10T11:20:00Z"
+    },
+    {
+      id: "6",
+      title: "CSS Grid vs Flexbox: Когда что использовать",
+      description: "Подробное сравнение двух основных CSS технологий верстки",
+      category: "frontend",
+      tags: ["css", "grid", "flexbox", "design"],
+      username: "Мария Сидорова",
+      content: "adasdasdasdasd",
+      updatedAt: "2024-01-08T13:10:00Z"
+    }
+  ];
+}
\ No newline at end of file
diff --git a/src/lib/services/teamService.js b/src/lib/services/teamService.js
new file mode 100644
index 0000000..e90d264
--- /dev/null
+++ b/src/lib/services/teamService.js
@@ -0,0 +1,110 @@
+import apiClient from './api.js';
+
+export const teamService = {
+  // Получить всех членов команды
+  async getTeamMembers() {
+    try {
+      const response = await apiClient.get('/team');
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching team members:', error);
+      // Возвращаем mock данные в случае ошибки
+      return getMockTeamMembers();
+    }
+  },
+
+  // Получить конкретного члена команды
+  async getTeamMember(id) {
+    try {
+      const response = await apiClient.get(`/team/${id}`);
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching team member:', error);
+      return null;
+    }
+  },
+
+  // Получить случайных членов команды для карусели
+  async getRandomMembers(limit = 4) {
+    try {
+      const response = await apiClient.get('/team/random', {
+        params: { limit }
+      });
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching random members:', error);
+      return getMockTeamMembers().slice(0, limit);
+    }
+  }
+};
+
+// Mock данные для разработки
+function getMockTeamMembers() {
+  return [
+    {
+      id: 1,
+      username: "coma",
+      name: "Coma",
+      role: "DevOps Engineer",
+      specialty: "Системное администрирование & Девопс",
+      description: "Отвечает за инфраструктуру, развертывание и мониторинг. Следит за тем, чтобы все системы работали как часы.",
+      skills: ["Docker", "Kubernetes", "AWS", "CI/CD", "Linux", "Monitoring"],
+      avatar: "⚙️",
+      joinDate: "2023",
+      projects: ["Infrastructure", "Deployment", "Monitoring"],
+      motto: "Если что-то можно автоматизировать - это должно быть автоматизировано"
+    },
+    {
+      id: 2,
+      username: "muts",
+      name: "Muts", 
+      role: "Embedded/Backend Developer",
+      specialty: "Встроенные системы & Бэкенд разработка",
+      description: "Работает на стыке hardware и software. Создает эффективные решения для встроенных систем и серверной части.",
+      skills: ["C/C++", "Python", "Embedded", "Rust", "API Design", "Microcontrollers"],
+      avatar: "🔌",
+      joinDate: "2023",
+      projects: ["Embedded Systems", "Backend API", "Hardware Integration"],
+      motto: "Код должен быть быстрым как железо, и надежным как скала"
+    },
+    {
+      id: 3,
+      username: "denzz",
+      name: "Denzz",
+      role: "Frontend Developer",
+      specialty: "Пользовательские интерфейсы & Веб-разработка",
+      description: "Создает интуитивные и красивые интерфейсы. Превращает сложные идеи в простые и элегантные решения.",
+      skills: ["Svelte", "JavaScript", "TypeScript", "CSS", "UI/UX", "Animation"],
+      avatar: "🎨",
+      joinDate: "2023", 
+      projects: ["Web Interfaces", "User Experience", "Visual Design"],
+      motto: "Хороший интерфейс - это когда пользователь не замечает интерфейс"
+    },
+    {
+      id: 4,
+      username: "itc1205",
+      name: "ITC1205",
+      role: "CEO & Backend Developer",
+      specialty: "Техническое руководство & Архитектура систем",
+      description: "Совмещает техническое видение с бизнес-стратегией. Отвечает за архитектурные решения и развитие команды.",
+      skills: ["System Architecture", "Project Management", "Node.js", "Python", "Leadership", "Strategy"],
+      avatar: "👑",
+      joinDate: "2023",
+      projects: ["Technical Strategy", "System Architecture", "Team Leadership"],
+      motto: "Технологии должны решать реальные проблемы, а не создавать новые"
+    },
+    {
+      id: 5,
+      username: "d1nnoise",
+      name: "D1nnoise",
+      role: "QA Engineer",
+      specialty: "Тестирование & Обеспечение качества",
+      description: "Гарантирует качество и надежность продуктов. Находит баги до того, как их найдут пользователи.",
+      skills: ["Testing", "Automation", "Quality Assurance", "Bug Tracking", "Test Planning", "CI/CD"],
+      avatar: "🐛",
+      joinDate: "2023",
+      projects: ["Quality Assurance", "Testing Automation", "Process Improvement"],
+      motto: "Идеального кода не существует, но к нему нужно стремиться"
+    }
+  ];
+}
\ No newline at end of file
diff --git a/src/lib/utils/date.js b/src/lib/utils/date.js
new file mode 100644
index 0000000..7994ff8
--- /dev/null
+++ b/src/lib/utils/date.js
@@ -0,0 +1,32 @@
+export function formatDate(dateString) {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('ru-RU', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  });
+}
+
+export function formatDateTime(dateString) {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('ru-RU', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+}
+
+export function getRelativeTime(dateString) {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffInSeconds = Math.floor((now - date) / 1000);
+
+  if (diffInSeconds < 60) return 'только что';
+  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} мин. назад`;
+  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} ч. назад`;
+  if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)} дн. назад`;
+  
+  return formatDate(dateString);
+}
\ No newline at end of file
diff --git a/src/lib/utils/markdown.js b/src/lib/utils/markdown.js
new file mode 100644
index 0000000..0cd250d
--- /dev/null
+++ b/src/lib/utils/markdown.js
@@ -0,0 +1,26 @@
+import { marked } from 'marked';
+import sanitizeHtml from 'sanitize-html';
+
+marked.setOptions({
+  breaks: true,
+  gfm: true
+});
+
+const sanitizeOptions = {
+  allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'h1', 'h2', 'h3']),
+  allowedAttributes: {
+    ...sanitizeHtml.defaults.allowedAttributes,
+    img: ['src', 'alt', 'title'],
+    a: ['href', 'name', 'target']
+  }
+};
+
+export function parseMarkdown(content) {
+  const html = marked.parse(content);
+  return sanitizeHtml(html, sanitizeOptions);
+}
+
+export function extractExcerpt(content, length = 150) {
+  const plainText = content.replace(/[#*`~]/g, '').replace(/\n/g, ' ');
+  return plainText.slice(0, length) + (plainText.length > length ? '...' : '');
+}
\ No newline at end of file
diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte
new file mode 100644
index 0000000..1f68d7d
--- /dev/null
+++ b/src/routes/(main)/+page.svelte
@@ -0,0 +1,960 @@
+<script>
+  import { onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { Row, Col } from '@sveltestrap/sveltestrap';
+  
+  import { teamService } from '$lib/services/teamService.js';
+  import { blogService } from '$lib/services/blogService.js';
+  
+  const teamMembers = writable([]);
+  const blogPosts = writable([]);
+  const loading = writable(true);
+  const error = writable(null);
+
+  const slogans = [
+    "Innovation Through Retro",
+    "Code Like It's 1999", 
+    "Future Ready, Retro Style",
+    "Where Vintage Meets Modern",
+    "Digital Revolution, Classic Soul"
+  ];
+
+  const currentSlogan = writable(slogans[0]);
+  const logLines = writable([]);
+  const currentMemberIndex = writable(0);
+  const isMobile = writable(false);
+
+  let sloganInterval;
+  let logInterval;
+  let memberInterval;
+
+  onMount(async () => {
+    isMobile.set(window.innerWidth < 768);
+
+
+    await loadData();
+
+    startAnimations();
+
+    const handleResize = () => isMobile.set(window.innerWidth < 768);
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      clearInterval(sloganInterval);
+      clearInterval(logInterval);
+      clearInterval(memberInterval);
+      window.removeEventListener('resize', handleResize);
+    };
+  });
+
+  async function loadData() {
+    try {
+      loading.set(true);
+      error.set(null);
+
+      const [membersData, postsData] = await Promise.all([
+        teamService.getRandomMembers(5),
+        blogService.getBlogPosts(3)
+      ]);
+
+      teamMembers.set(membersData);
+      blogPosts.set(postsData);
+
+    } catch (err) {
+      console.error('Error loading data:', err);
+      error.set('Failed to load data. Please try again later.');
+    } finally {
+      loading.set(false);
+    }
+  }
+
+  function startAnimations() {
+    // Смена слоганов
+    let sloganIndex = 0;
+    sloganInterval = setInterval(() => {
+      sloganIndex = (sloganIndex + 1) % slogans.length;
+      currentSlogan.set(slogans[sloganIndex]);
+    }, 3000);
+
+    // Генерация логов
+    const logMessages = [
+      "SYSTEM: Initializing retro framework...",
+      "NETWORK: Connection established to main server",
+      "SECURITY: Firewall rules applied successfully", 
+      "STORAGE: SSD cache optimized for performance",
+      "MEMORY: Allocated 2GB for glitch effects buffer",
+      "GPU: VHS rendering pipeline activated",
+      "AUDIO: Retro sound system initialized",
+      "UI: Terminal interface rendered successfully"
+    ];
+
+    logInterval = setInterval(() => {
+      const randomLog = logMessages[Math.floor(Math.random() * logMessages.length)];
+      logLines.update(lines => {
+        const newLines = [...lines, randomLog];
+        return newLines.slice(-20);
+      });
+    }, 500);
+
+    // Карусель сотрудников
+    memberInterval = setInterval(() => {
+      currentMemberIndex.update(idx => (idx + 1) % $teamMembers.length);
+    }, 4000);
+  }
+
+  function nextMember() {
+    currentMemberIndex.update(idx => (idx + 1) % $teamMembers.length);
+  }
+
+  function prevMember() {
+    currentMemberIndex.update(idx => (idx - 1 + $teamMembers.length) % $teamMembers.length);
+  }
+
+  function getRandomLogMessage() {
+    const logTypes = [
+      {
+        prefix: "SYSTEM",
+        messages: [
+          "Initializing retro framework... [OK]",
+          "Memory allocation: 2GB for glitch buffer",
+          "VHS rendering pipeline: ACTIVE",
+          "Terminal interface: RENDERED",
+          "Audio system: RETRO MODE ENABLED"
+        ]
+      },
+      {
+        prefix: "NETWORK", 
+        messages: [
+          "Connected to main server: 192.168.1.58",
+          "Bandwidth: 1.2 Gbps UPLOAD",
+          "Latency: 12ms PING",
+          "SSL Certificate: VALID",
+          "VPN Tunnel: ESTABLISHED"
+        ]
+      },
+      {
+        prefix: "API",
+        messages: [
+          "Team data loaded successfully",
+          "Blog posts fetched from database", 
+          "API response time: 120ms",
+          "Cache hit ratio: 92%",
+          "Data synchronization: COMPLETE"
+        ]
+      }
+    ];
+
+    const type = logTypes[Math.floor(Math.random() * logTypes.length)];
+    const message = type.messages[Math.floor(Math.random() * type.messages.length)];
+    return `${type.prefix}: ${message}`;
+  }
+</script>
+
+<main class="tiling-layout">
+  {#if $error}
+    <div class="error-banner">
+      <div class="error-content">
+        <span class="error-icon"></span>
+        <span class="error-message">{$error}</span>
+        <button class="retry-btn" on:click={loadData}>Retry</button>
+      </div>
+    </div>
+  {/if}
+
+    <Row class="h-100 g-0">
+      <!-- Блок 1: Левая панель (50vw × 100vh) -->
+      <Col lg={6} class="h-100">
+        <div class="panel left-panel">
+          <div class="panel-content">
+            <!-- Логотип и слоган -->
+            <div class="welcome-section">
+              <div class="main-logo">
+                <span class="logo-bracket">[</span>
+                <span class="logo-number">58</span>
+                <span class="logo-bracket">]</span>
+                <span class="logo-text">Team</span>
+              </div>
+              
+              <div class="slogan-display">
+                <div class="slogan-line">
+                  <span class="prompt">$</span>
+                  <span class="slogan">{$currentSlogan}</span>
+                </div>
+                <div class="cursor blink">_</div>
+              </div>
+
+              {#if $loading}
+                <div class="loading-indicator">
+                  <div class="loading-spinner"></div>
+                  <span>Loading data from API...</span>
+                </div>
+              {/if}
+            </div>
+          </div>
+
+          <!-- Бегущие логи на фоне -->
+          <div class="logs-background">
+            {#each Array(30) as _, i}
+              <div 
+                class="log-line" 
+                style="
+                  animation-delay: {i * 2}s;
+                  left: {Math.random() * 90 + 5}%;
+                  animation-duration: {Math.random() * 10 + 20}s;
+                  opacity: {Math.random() * 0.3 + 0.1};
+                  font-size: {Math.random() * 4 + 10}px;
+                "
+              >
+                {getRandomLogMessage()}
+              </div>
+            {/each}
+          </div>
+        </div>
+      </Col>
+
+      <!-- Правая колонка (50vw × 100vh) -->
+      <Col lg={6} class="h-100">
+        <Row class="h-100 g-0">
+          <!-- Блок 2: Верхняя правая панель (50vw × 50vh) -->
+          <Col lg={12} class="h-50">
+            <div class="panel team-panel">
+              <div class="panel-header">
+                <h3>MEET THE TEAM</h3>
+                <a href="/team" class="view-all">VIEW ALL →</a>
+              </div>
+              
+              <div class="team-carousel">
+                {#if $loading}
+                  <div class="loading-state">
+                    <div class="loading-spinner"></div>
+                    <span>Loading team members...</span>
+                  </div>
+                {:else if $teamMembers.length === 0}
+                  <div class="empty-state">
+                    <span class="empty-icon">👥</span>
+                    <span>No team members found</span>
+                  </div>
+                {:else}
+                  {#each [$teamMembers[$currentMemberIndex]] as member}
+                    <div class="team-member-card">
+                      <div class="member-avatar">{member.avatar}</div>
+                      <div class="member-info">
+                        <h4 class="member-name">{member.name}</h4>
+                        <p class="member-role">{member.role}</p>
+                        <p class="member-bio">{member.bio}</p>
+                        <div class="member-skills">
+                          {#each member.skills.slice(0, 3) as skill}
+                            <span class="skill-tag">{skill}</span>
+                          {/each}
+                        </div>
+                      </div>
+                    </div>
+                  {/each}
+
+                  <div class="carousel-controls">
+                    <button class="control-btn" on:click={prevMember}>‹</button>
+                    <div class="carousel-dots">
+                      {#each $teamMembers as _, index}
+                        <span 
+                          class:active={index === $currentMemberIndex}
+                          class="dot"
+                          on:click={() => currentMemberIndex.set(index)}
+                        ></span>
+                      {/each}
+                    </div>
+                    <button class="control-btn" on:click={nextMember}>›</button>
+                  </div>
+                {/if}
+              </div>
+            </div>
+          </Col>
+
+          <!-- Блок 3: Нижняя правая панель (50vw × 50vh) -->
+          <Col lg={12} class="h-50">
+            <div class="panel blog-panel">
+              <div class="panel-header">
+                <h3>LATEST ARTICLES</h3>
+                <a href="/blog" class="view-all">VIEW ALL →</a>
+              </div>
+              
+              <div class="articles-list">
+                {#if $loading}
+                  <div class="loading-state">
+                    <div class="loading-spinner"></div>
+                    <span>Loading articles...</span>
+                  </div>
+                {:else if $blogPosts.length === 0}
+                  <div class="empty-state">
+                    <span class="empty-icon">📝</span>
+                    <span>No articles found</span>
+                  </div>
+                {:else}
+                  {#each $blogPosts as post}
+                    <article class="article-preview">
+                      <div class="article-meta">
+                        <span class="article-date">{new Date(post.date).toLocaleDateString()}</span>
+                        <span class="article-author">by {post.author}</span>
+                      </div>
+                      <h4 class="article-title">{post.title}</h4>
+                      <p class="article-excerpt">{post.excerpt}</p>
+                      <div class="article-footer">
+                        <div class="article-tags">
+                          {#each post.tags.slice(0, 2) as tag}
+                            <span class="tag">#{tag}</span>
+                          {/each}
+                        </div>
+                        <a href={`/blog/${post.slug}`} class="read-more">READ →</a>
+                      </div>
+                    </article>
+                  {/each}
+                {/if}
+              </div>
+            </div>
+          </Col>
+        </Row>
+      </Col>
+    </Row>
+</main>
+
+<style>
+  .tiling-layout {
+    height: 100vh;
+    padding-top: 50px;
+    background: var(--bg-dark);
+    overflow: hidden;
+  }
+
+  .panel {
+    height: 100%;
+    border: 1px solid var(--terminal-border);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .panel-content {
+    padding: 40px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    position: relative;
+    z-index: 2;
+  }
+
+  /* Левая панель */
+  .left-panel {
+    border-right: 2px solid var(--primary-green);
+  }
+
+  .main-logo {
+    font-size: 4rem;
+    font-weight: bold;
+    margin-bottom: 30px;
+    font-family: 'JetBrains Mono', monospace;
+  }
+
+  .logo-bracket {
+    color: var(--secondary-pink);
+  }
+
+  .logo-number {
+    color: var(--primary-green);
+  }
+
+  .logo-text {
+    color: var(--text-secondary);
+   
+  }
+
+  .slogan-display {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 1.5rem;
+    font-family: 'Courier New', monospace;
+  }
+
+  .prompt {
+    color: var(--secondary-pink);
+    font-weight: bold;
+  }
+
+  .slogan {
+    color: var(--primary-green);
+  }
+
+  .cursor {
+    color: var(--primary-green);
+    animation: blink 1s infinite;
+  }
+
+  /* Логи на фоне */
+  .logs-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0.1;
+    pointer-events: none;
+    z-index: 1;
+    overflow: hidden;
+  }
+
+  .log-line {
+    color: var(--primary-green);
+    font-family: 'Courier New', monospace;
+    font-size: 0.8rem;
+    margin-bottom: 5px;
+    opacity: 0;
+    animation: logScroll 15s linear forwards;
+    white-space: nowrap;
+  }
+
+  @keyframes logScroll {
+    0% {
+      transform: translateY(100vh);
+      opacity: 0;
+    }
+    5% {
+      opacity: 0.3;
+    }
+    95% {
+      opacity: 0.3;
+    }
+    100% {
+      transform: translateY(-100px);
+      opacity: 0;
+    }
+  }
+
+  /* Правая верхняя панель (команда) */
+  .team-panel {
+    border-bottom: 1px solid var(--terminal-border);
+  }
+
+  .panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 30px 0;
+    margin-bottom: 20px;
+  }
+
+  .panel-header h3 {
+    color: var(--primary-green);
+    margin: 0;
+    font-size: 1.2rem;
+  }
+
+  .view-all {
+    color: var(--secondary-pink);
+    text-decoration: none;
+    font-size: 0.9rem;
+    transition: all 0.3s ease;
+  }
+
+  .view-all:hover {
+    color: var(--primary-green);
+  }
+
+  .team-carousel {
+    padding: 0 30px;
+    height: calc(100% - 80px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .team-member-card {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 10px;
+    padding: 20px;
+    transition: all 0.3s ease;
+  }
+
+  .team-member-card:hover {
+    transform: translateX(5px);
+    border-color: var(--primary-green);
+  }
+
+  .member-avatar {
+    font-size: 3rem;
+  }
+
+  .member-info {
+    flex: 1;
+  }
+
+  .member-name {
+    color: var(--primary-green);
+    font-size: 1.3rem;
+    margin: 0 0 5px 0;
+  }
+
+  .member-role {
+    color: var(--secondary-pink);
+    font-weight: bold;
+    margin: 0 0 10px 0;
+  }
+
+  .member-bio {
+    color: var(--text-secondary);
+    margin: 0;
+    font-size: 0.9rem;
+  }
+
+  .carousel-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+    margin-top: 20px;
+  }
+
+  .control-btn {
+    background: rgba(51, 255, 0, 0.1);
+    border: 1px solid var(--primary-green);
+    color: var(--primary-green);
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 1rem;
+  }
+
+  .control-btn:hover {
+    background: var(--primary-green);
+    color: var(--bg-dark);
+  }
+
+  .carousel-dots {
+    display: flex;
+    gap: 8px;
+  }
+
+  .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--text-muted);
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .dot.active {
+    background: var(--primary-green);
+    transform: scale(1.2);
+  }
+
+  /* Правая нижняя панель (статьи) */
+  .blog-panel {
+    border-top: 1px solid var(--terminal-border);
+  }
+
+  .articles-list {
+    padding: 0 30px;
+    height: calc(100% - 80px);
+    overflow-y: auto;
+  }
+
+  .article-preview {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 15px;
+    transition: all 0.3s ease;
+  }
+
+  .article-preview:hover {
+    border-color: var(--primary-green);
+    transform: translateY(-2px);
+  }
+
+  .article-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin-bottom: 8px;
+  }
+
+  .article-title {
+    color: var(--primary-green);
+    font-size: 1.1rem;
+    margin: 0 0 8px 0;
+  }
+
+  .article-excerpt {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    margin: 0 0 10px 0;
+    line-height: 1.4;
+  }
+
+  .read-more {
+    color: var(--secondary-pink);
+    text-decoration: none;
+    font-size: 0.9rem;
+    font-weight: bold;
+    transition: all 0.3s ease;
+  }
+
+  .read-more:hover {
+    color: var(--primary-green);
+  }
+
+  /* Адаптивность */
+  @media (max-width: 992px) {
+    .main-logo {
+      font-size: 3rem;
+    }
+
+    .slogan-display {
+      font-size: 1.2rem;
+    }
+
+    .panel-content {
+      padding: 30px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .tiling-layout {
+      height: auto;
+      min-height: 100vh;
+      padding-top: 40px;
+    }
+
+
+    .main-logo {
+      font-size: 2.5rem;
+      text-align: center;
+    }
+
+    .slogan-display {
+      font-size: 1rem;
+      justify-content: center;
+    }
+
+    .panel-content {
+      padding: 20px;
+    }
+
+    .team-member-card {
+      flex-direction: column;
+      text-align: center;
+    }
+
+    .member-avatar {
+      font-size: 2.5rem;
+    }
+
+    .panel-header {
+      padding: 15px 20px 0;
+    }
+
+    .team-carousel,
+    .articles-list {
+      padding: 0 20px;
+    }
+  }
+
+  @media (max-width: 576px) {
+    .main-logo {
+      font-size: 2rem;
+    }
+
+    .panel-header {
+      flex-direction: column;
+      gap: 10px;
+      text-align: center;
+    }
+
+    .team-carousel,
+    .articles-list {
+      padding: 0 15px;
+    }
+
+    .article-preview {
+      padding: 12px;
+    }
+  }
+
+   .logs-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 1;
+    overflow: hidden;
+    background: 
+      linear-gradient(180deg, 
+        rgba(0, 255, 102, 0.03) 0%, 
+        transparent 50%,
+        rgba(0, 255, 102, 0.03) 100%
+      );
+  }
+
+  .log-line {
+    position: absolute;
+    color: var(--primary-green);
+    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
+    font-weight: 500;
+    white-space: nowrap;
+    text-shadow: 
+      0 0 10px rgba(0, 255, 102, 0.8),
+      0 0 20px rgba(0, 255, 102, 0.4),
+      0 0 30px rgba(0, 255, 102, 0.2);
+    animation: logFloat infinite linear;
+    opacity: 0;
+  }
+
+  @keyframes logFloat {
+    0% {
+      transform: translateY(100vh) rotate(0deg);
+      opacity: 0;
+    }
+    5% {
+      opacity: 1;
+    }
+    95% {
+      opacity: 1;
+    }
+    100% {
+      transform: translateY(-100px) rotate(0deg);
+      opacity: 0;
+    }
+  }
+
+  /* эффект сканирования ЭЛТ */
+  .left-panel::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgba(0, 255, 102, 0.02) 10%,
+      transparent 20%,
+      rgba(0, 255, 102, 0.03) 30%,
+      transparent 40%,
+      rgba(0, 255, 102, 0.01) 50%,
+      transparent 60%,
+      rgba(0, 255, 102, 0.02) 70%,
+      transparent 80%,
+      rgba(0, 255, 102, 0.01) 90%,
+      transparent 100%
+    );
+    background-size: 100% 200px;
+    animation: scan 8s linear infinite;
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  @keyframes scan {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: 0 200px;
+    }
+  }
+
+  /* Эффект мерцания как в старых мониторах */
+  .left-panel::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: 
+      radial-gradient(
+        circle at 20% 80%,
+        rgba(0, 255, 102, 0.05) 0%,
+        transparent 50%
+      ),
+      radial-gradient(
+        circle at 80% 20%,
+        rgba(255, 0, 255, 0.03) 0%,
+        transparent 50%
+      );
+    pointer-events: none;
+    z-index: 3;
+    animation: flicker 0.2s infinite;
+  }
+
+  @keyframes flicker {
+    0%, 100% { opacity: 0.97; }
+    50% { opacity: 0.99; }
+  }
+
+
+  /* Делаем логотип и слоган более контрастными */
+  .main-logo {
+    text-shadow: 
+      0 0 20px rgba(0, 255, 102, 0.5),
+      0 0 40px rgba(0, 255, 102, 0.3),
+      0 0 60px rgba(0, 255, 102, 0.1);
+  }
+
+  .slogan {
+    text-shadow: 
+      0 0 10px rgba(0, 255, 102, 0.6),
+      0 0 20px rgba(0, 255, 102, 0.4);
+  }
+
+  
+  @media (max-width: 768px) {
+    .log-line {
+      font-size: 10px !important;
+    }
+
+    .panel-content {
+      margin: 10px;
+      padding: 20px;
+    }
+
+    .logs-background {
+      opacity: 0.8;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .log-line {
+      font-size: 8px !important;
+    }
+
+    .panel-content {
+      margin: 5px;
+      padding: 15px;
+    }
+  }
+
+    .tiling-layout {
+    height: 100vh;
+    padding-top: 50px;
+    background: var(--bg-dark);
+    overflow: hidden;
+  }
+
+  .error-banner {
+    position: fixed;
+    top: 60px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(255, 0, 0, 0.1);
+    border: 1px solid #ff4444;
+    border-radius: 5px;
+    padding: 10px 20px;
+    z-index: 1000;
+    backdrop-filter: blur(10px);
+  }
+
+  .error-content {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: #ff4444;
+  }
+
+  .retry-btn {
+    background: rgba(255, 0, 0, 0.2);
+    border: 1px solid #ff4444;
+    color: #ff4444;
+    padding: 5px 10px;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 0.8rem;
+  }
+
+  .retry-btn:hover {
+    background: #ff4444;
+    color: white;
+  }
+
+  .loading-indicator {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 20px;
+    color: var(--primary-green);
+  }
+
+  .loading-state, .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--text-muted);
+    gap: 10px;
+  }
+
+  .loading-spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--primary-green);
+    border-top: 2px solid transparent;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+
+  .empty-icon {
+    font-size: 2rem;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .member-skills {
+    display: flex;
+    gap: 5px;
+    margin-top: 10px;
+  }
+
+  .skill-tag {
+    background: rgba(51, 255, 0, 0.1);
+    color: var(--primary-green);
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 0.7rem;
+    border: 1px solid var(--primary-green);
+  }
+
+  .article-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+  }
+
+  .article-tags {
+    display: flex;
+    gap: 5px;
+  }
+
+  .tag {
+    background: rgba(255, 0, 170, 0.1);
+    color: var(--secondary-pink);
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 0.7rem;
+    border: 1px solid var(--secondary-pink);
+  }
+
+</style>
\ No newline at end of file
diff --git a/src/routes/(main)/about/+page.svelte b/src/routes/(main)/about/+page.svelte
new file mode 100644
index 0000000..ba6e2cd
--- /dev/null
+++ b/src/routes/(main)/about/+page.svelte
@@ -0,0 +1,942 @@
+<script>
+  import { onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { Container, Row, Col } from '@sveltestrap/sveltestrap';
+  import GlitchText from '$lib/components/GlitchText.svelte';
+  import CRTScreen from '$lib/components/CRTScreen.svelte';
+
+  const activeSection = writable('mission');
+  const isMobile = writable(false);
+
+  const teamData = {
+    mission: {
+      title: "Наша Миссия",
+      icon: "",
+      content: {
+        main: "Мы создаем инновационные технологические решения, которые делают мир лучше, проще и эффективнее.",
+        points: [
+          "Разрабатывать ПО, которое решает реальные проблемы",
+          "Создавать продукты с душой и вниманием к деталям", 
+          "Продвигать open-source и сообщество разработчиков",
+          "Обучать и вдохновлять следующее поколение инженеров"
+        ]
+      }
+    },
+    values: {
+      title: "Наши Ценности", 
+      icon: "",
+      content: {
+        main: "Наши ценности - это фундамент, на котором строится вся наша работа.",
+        points: [
+          {
+            icon: "",
+            title: "Инновации",
+            description: "Мы постоянно исследуем новые технологии и подходы"
+          },
+          {
+            icon: "", 
+            title: "Качество",
+            description: "Каждая строка кода должна быть продумана и оптимизирована"
+          },
+          {
+            icon: "",
+            title: "Сотрудничество",
+            description: "Вместе мы достигаем большего, чем по отдельности"
+          },
+          {
+            icon: "",
+            title: "Обучение",
+            description: "Мы постоянно растем и развиваемся как профессионалы"
+          },
+          {
+            icon: "",
+            title: "Креативность",
+            description: "Находим нестандартные решения для сложных задач"
+          },
+          {
+            icon: "",
+            title: "Эффективность",
+            description: "Делаем больше за меньшее время без потери качества"
+          }
+        ]
+      }
+    },
+    history: {
+      title: "Наша История",
+      icon: "",
+      content: {
+        main: "Путь от идеи к реализации - это история постоянного роста и развития.",
+        timeline: [
+          {
+            year: "2023",
+            event: "Основание команды",
+            description: "Группа энтузиастов объединилась для работы над первыми проектами"
+          },
+          {
+            year: "2024",
+            event: "Первый крупный проект", 
+            description: "Успешный запуск платформы для блогов в ретро-стиле"
+          },
+          {
+            year: "2024",
+            event: "Расширение команды",
+            description: "К команде присоединились специалисты разных направлений"
+          },
+          {
+            year: "Настоящее время",
+            event: "Активное развитие",
+            description: "Работа над несколькими инновационными проектами одновременно"
+          }
+        ]
+      }
+    },
+    technology: {
+      title: "Технологии",
+      icon: "",
+      content: {
+        main: "Мы используем современный стек технологий, сочетая его с проверенными временем решениями.",
+        categories: [
+          {
+            name: "Frontend",
+            technologies: ["Svelte/SvelteKit", "TypeScript", "Vue.js", "Tailwind CSS"],
+            color: "#00aaff"
+          },
+          {
+            name: "Backend",
+            technologies: ["Node.js", "Python", "Rust", "PostgreSQL", "MongoDB"],
+            color: "#ff00aa"
+          },
+          {
+            name: "DevOps",
+            technologies: ["Docker", "Kubernetes", "AWS", "GitLab CI/CD", "Linux"],
+            color: "#00ff88"
+          },
+          {
+            name: "Embedded",
+            technologies: ["C/C++", "Arduino", "Raspberry Pi", "IoT Protocols"],
+            color: "#ffaa00"
+          },
+          {
+            name: "QA",
+            technologies: ["Jest", "Cypress", "Selenium", "Test Automation"],
+            color: "#aa00ff"
+          }
+        ]
+      }
+    }
+  };
+
+  const stats = {
+    projects: 12,
+    teamMembers: 5,
+    yearsExperience: 2,
+    technologies: 20,
+    satisfiedClients: 8,
+    codeCommits: 2500
+  };
+
+  onMount(() => {
+    isMobile.set(window.innerWidth < 768);
+    
+    const handleResize = () => isMobile.set(window.innerWidth < 768);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  });
+
+  function setActiveSection(section) {
+    activeSection.set(section);
+  }
+</script>
+
+<section class="about-page">
+    <Row class=" g-0">
+      <!-- Левая панель - Навигация -->
+      <Col lg={3} class="h-100">
+        <div class="panel navigation-panel">
+          <CRTScreen class="navigation-terminal h-100">
+            <div class="terminal-header">
+              <span class="blink">█</span> О КОМАНДЕ [58]
+            </div>
+            
+            <div class="terminal-body navigation-body">
+
+              <div class="navigation-menu">
+                {#each Object.entries(teamData) as [key, section]}
+                  <div 
+                    class="nav-item"
+                    class:active={$activeSection === key}
+                    on:click={() => setActiveSection(key)}
+                  >
+                    <span class="nav-icon">{section.icon}</span>
+                    <span class="nav-title">{section.title}</span>
+                    <span class="nav-arrow">
+                      {#if $activeSection === key}
+                        ▶
+                      {:else}
+                        ●
+                      {/if}
+                    </span>
+                  </div>
+                {/each}
+              </div>
+
+              <div class="quick-stats">
+                <h4> Быстрая статистика</h4>
+                <div class="stats-grid">
+                  <div class="stat">
+                    <span class="stat-number">{stats.projects}+</span>
+                    <span class="stat-label">Проектов</span>
+                  </div>
+                  <div class="stat">
+                    <span class="stat-number">{stats.teamMembers}</span>
+                    <span class="stat-label">Участников</span>
+                  </div>
+                  <div class="stat">
+                    <span class="stat-number">{stats.yearsExperience}</span>
+                    <span class="stat-label">Года опыта</span>
+                  </div>
+                  <div class="stat">
+                    <span class="stat-number">{stats.technologies}+</span>
+                    <span class="stat-label">Технологий</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="contact-info">
+                <h4> Контакты</h4>
+                <div class="contact-item">
+                  <span class="contact-icon"></span>
+                  <span class="contact-text">team58@example.com</span>
+                </div>
+                <div class="contact-item">
+                  <span class="contact-icon"></span>
+                  <span class="contact-text">@58team</span>
+                </div>
+                <div class="contact-item">
+                  <span class="contact-icon"></span>
+                  <span class="contact-text">github.com/58team</span>
+                </div>
+              </div>
+            </div>
+          </CRTScreen>
+        </div>
+      </Col>
+
+      <!-- Правая панель - Контент -->
+      <Col lg={9} class="h-100">
+        <div class="panel content-panel">
+          <CRTScreen class="content-terminal h-100">
+            <div class="terminal-header">
+              <span class="blink">█</span> 
+              {teamData[$activeSection].icon} {teamData[$activeSection].title}
+            </div>
+            
+            <div class="terminal-body content-body">
+              <div class="content-scroll">
+                {#if $activeSection === 'mission'}
+                  <div class="mission-content">
+                    <div class="section-header">
+                      <h1>Наша Миссия</h1>
+                      <p class="lead">{teamData.mission.content.main}</p>
+                    </div>
+
+                    <div class="mission-points">
+                      {#each teamData.mission.content.points as point}
+                        <div class="mission-point">
+                          <span class="point-icon">✓</span>
+                          <span class="point-text">{point}</span>
+                        </div>
+                      {/each}
+                    </div>
+
+                    <div class="mission-vision">
+                      <h2> Наше Видение</h2>
+                      <div class="vision-grid">
+                        <div class="vision-card">
+                          <div class="vision-icon"></div>
+                          <h3>Инновации</h3>
+                          <p>Создавать технологии, которые опережают время</p>
+                        </div>
+                        <div class="vision-card">
+                          <div class="vision-icon"></div>
+                          <h3>Влияние</h3>
+                          <p>Менять мир к лучшему через технологии</p>
+                        </div>
+                        <div class="vision-card">
+                          <div class="vision-icon"></div>
+                          <h3>Сообщество</h3>
+                          <p>Развивать open-source и помогать другим</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                {:else if $activeSection === 'values'}
+                  <div class="values-content">
+                    <div class="section-header">
+                      <h1>Наши Ценности</h1>
+                      <p class="lead">{teamData.values.content.main}</p>
+                    </div>
+
+                    <div class="values-grid">
+                      {#each teamData.values.content.points as value}
+                        <div class="value-card">
+                          <div class="value-icon">{value.icon}</div>
+                          <div class="value-content">
+                            <h3>{value.title}</h3>
+                            <p>{value.description}</p>
+                          </div>
+                        </div>
+                      {/each}
+                    </div>
+
+                    <div class="values-principles">
+                      <h2>Наши Принципы Работы</h2>
+                      <div class="principles-list">
+                        <div class="principle">
+                          <strong>Agile подход:</strong> Гибкость и адаптивность в разработке
+                        </div>
+                        <div class="principle">
+                          <strong>Code Review:</strong> Каждая строка кода проверяется коллегами
+                        </div>
+                        <div class="principle">
+                          <strong>Документация:</strong> Подробная документация для всех проектов
+                        </div>
+                        <div class="principle">
+                          <strong>Непрерывное обучение:</strong> Регулярные воркшопы и обмен знаниями
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                {:else if $activeSection === 'history'}
+                  <div class="history-content">
+                    <div class="section-header">
+                      <h1>Наша История</h1>
+                      <p class="lead">{teamData.history.content.main}</p>
+                    </div>
+
+                    <div class="timeline">
+                      {#each teamData.history.content.timeline as event, index}
+                        <div class="timeline-item">
+                          <div class="timeline-marker">
+                            <div class="marker-dot"></div>
+                            {#if index < teamData.history.content.timeline.length - 1}
+                              <div class="marker-line"></div>
+                            {/if}
+                          </div>
+                          <div class="timeline-content">
+                            <div class="timeline-year">{event.year}</div>
+                            <h3>{event.event}</h3>
+                            <p>{event.description}</p>
+                          </div>
+                        </div>
+                      {/each}
+                    </div>
+
+                    <div class="history-achievements">
+                      <h2> Наши Достижения</h2>
+                      <div class="achievements-grid">
+                        <div class="achievement">
+                          <div class="achievement-icon"></div>
+                          <div class="achievement-text">Успешный запуск 10+ проектов</div>
+                        </div>
+                        <div class="achievement">
+                          <div class="achievement-icon"></div>
+                          <div class="achievement-text">Собрана сильная команда специалистов</div>
+                        </div>
+                        <div class="achievement">
+                          <div class="achievement-icon"></div>
+                          <div class="achievement-text">Разработана уникальная ретро-платформа</div>
+                        </div>
+                        <div class="achievement">
+                          <div class="achievement-icon"></div>
+                          <div class="achievement-text">Постоянный рост и развитие</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                {:else if $activeSection === 'technology'}
+                  <div class="technology-content">
+                    <div class="section-header">
+                      <h1>Наш Технологический Стек</h1>
+                      <p class="lead">{teamData.technology.content.main}</p>
+                    </div>
+
+                    <div class="tech-categories">
+                      {#each teamData.technology.content.categories as category}
+                        <div class="tech-category">
+                          <h3 style="color: {category.color}">{category.name}</h3>
+                          <div class="tech-tags">
+                            {#each category.technologies as tech}
+                              <span 
+                                class="tech-tag"
+                                style="border-color: {category.color}; color: {category.color}"
+                              >
+                                {tech}
+                              </span>
+                            {/each}
+                          </div>
+                        </div>
+                      {/each}
+                    </div>
+
+                    <div class="tech-philosophy">
+                      <h2>Наш Подход к Технологиям</h2>
+                      <div class="philosophy-points">
+                        <div class="philosophy-point">
+                          <strong>Правильный инструмент для задачи:</strong> Выбираем технологии исходя из требований проекта
+                        </div>
+                        <div class="philosophy-point">
+                          <strong>Современные стандарты:</strong> Следуем best practices и актуальным трендам
+                        </div>
+                        <div class="philosophy-point">
+                          <strong>Безопасность и надежность:</strong> Приоритет - стабильность и защита данных
+                        </div>
+                        <div class="philosophy-point">
+                          <strong>Масштабируемость:</strong> Архитектура, которая растет вместе с проектом
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                {/if}
+
+                <div class="content-footer">
+                  <div class="footer-cta">
+                    <h3> Готовы работать с нами?</h3>
+                    <p>Мы всегда открыты для новых вызовов и интересных проектов</p>
+                    <div class="cta-buttons">
+                      <a href="/contact" class="cta-btn primary">Связаться с нами</a>
+                      <a href="/projects" class="cta-btn secondary">Наши проекты</a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </CRTScreen>
+        </div>
+      </Col>
+    </Row>
+</section>
+
+<style>
+  .about-page {
+    min-height: 100vh;
+    padding-top: 50px;
+    background: var(--bg-dark);
+    overflow: hidden;
+  }
+
+  .panel {
+    height: 100%;
+    border: 1px solid var(--terminal-border);
+    background: rgba(10, 10, 10, 0.9);
+  }
+
+  .terminal-header {
+    background: var(--primary-green);
+    color: var(--bg-dark);
+    padding: 12px 20px;
+    font-weight: bold;
+    border-bottom: 2px solid var(--bg-dark);
+    font-size: 0.9rem;
+    font-family: 'Courier New', monospace;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .terminal-body {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .navigation-body {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+  }
+
+
+  .navigation-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  .nav-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 15px;
+    border: 1px solid var(--terminal-border);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  .nav-item:hover {
+    border-color: var(--primary-green);
+    transform: translateX(5px);
+  }
+
+  .nav-item.active {
+    border-color: var(--secondary-pink);
+    background: rgba(255, 0, 170, 0.1);
+  }
+
+  .nav-icon {
+    font-size: 1.2rem;
+    width: 20px;
+    text-align: center;
+  }
+
+  .nav-title {
+    flex: 1;
+    color: var(--text-secondary);
+    font-weight: bold;
+  }
+
+  .nav-item.active .nav-title {
+    color: var(--primary-green);
+  }
+
+  .nav-arrow {
+    color: var(--text-muted);
+  }
+
+  .quick-stats h4, .contact-info h4 {
+    color: var(--primary-green);
+    margin: 0 0 15px 0;
+    font-size: 1rem;
+  }
+
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+  }
+
+  .stat {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 6px;
+    padding: 10px;
+    text-align: center;
+  }
+
+  .stat-number {
+    display: block;
+    color: var(--primary-green);
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin-bottom: 2px;
+  }
+
+  .stat-label {
+    color: var(--text-muted);
+    font-size: 0.7rem;
+  }
+
+  .contact-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .contact-item:last-child {
+    border-bottom: none;
+  }
+
+  .contact-icon {
+    font-size: 1rem;
+    width: 20px;
+    text-align: center;
+  }
+
+  .contact-text {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+  }
+
+  /* Контентная часть */
+  .content-body {
+    padding: 0;
+  }
+
+  .content-scroll {
+    flex: 1;
+    padding: 30px;
+    overflow-y: auto;
+  }
+
+  .section-header {
+    margin-bottom: 40px;
+    text-align: center;
+  }
+
+  .section-header h1 {
+    color: var(--primary-green);
+    font-size: 2.5rem;
+    margin: 0 0 20px 0;
+  }
+
+  .lead {
+    color: var(--text-secondary);
+    font-size: 1.2rem;
+    line-height: 1.6;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  /* Стили для разных секций */
+  .mission-points {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin: 30px 0;
+  }
+
+  .mission-point {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    padding: 15px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+  }
+
+  .point-icon {
+    color: var(--primary-green);
+    font-weight: bold;
+    font-size: 1.2rem;
+  }
+
+  .point-text {
+    color: var(--text-secondary);
+    font-size: 1.1rem;
+  }
+
+  .vision-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+    margin-top: 30px;
+  }
+
+  .vision-card {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    padding: 20px;
+    text-align: center;
+    transition: all 0.3s ease;
+  }
+
+  .vision-card:hover {
+    border-color: var(--primary-green);
+    transform: translateY(-5px);
+  }
+
+  .vision-icon {
+    font-size: 2rem;
+    margin-bottom: 15px;
+  }
+
+  .vision-card h3 {
+    color: var(--primary-green);
+    margin: 0 0 10px 0;
+  }
+
+  .vision-card p {
+    color: var(--text-secondary);
+    margin: 0;
+    line-height: 1.5;
+  }
+
+  .values-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    margin: 30px 0;
+  }
+
+  .value-card {
+    display: flex;
+    gap: 15px;
+    padding: 20px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    transition: all 0.3s ease;
+  }
+
+  .value-card:hover {
+    border-color: var(--primary-green);
+  }
+
+  .value-icon {
+    font-size: 1.5rem;
+    margin-top: 5px;
+  }
+
+  .value-content h3 {
+    color: var(--primary-green);
+    margin: 0 0 10px 0;
+    font-size: 1.2rem;
+  }
+
+  .value-content p {
+    color: var(--text-secondary);
+    margin: 0;
+    line-height: 1.5;
+  }
+
+  .principles-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 20px;
+  }
+
+  .principle {
+    color: var(--text-secondary);
+    padding: 10px 15px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 6px;
+    border-left: 3px solid var(--primary-green);
+  }
+
+  .timeline {
+    position: relative;
+    margin: 40px 0;
+  }
+
+  .timeline-item {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 30px;
+  }
+
+  .timeline-marker {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .marker-dot {
+    width: 12px;
+    height: 12px;
+    background: var(--primary-green);
+    border-radius: 50%;
+    border: 2px solid var(--bg-dark);
+  }
+
+  .marker-line {
+    flex: 1;
+    width: 2px;
+    background: var(--primary-green);
+    margin-top: 5px;
+  }
+
+  .timeline-content {
+    flex: 1;
+    padding-bottom: 20px;
+  }
+
+  .timeline-year {
+    color: var(--secondary-pink);
+    font-weight: bold;
+    font-size: 1.1rem;
+    margin-bottom: 5px;
+  }
+
+  .timeline-content h3 {
+    color: var(--primary-green);
+    margin: 0 0 10px 0;
+    font-size: 1.3rem;
+  }
+
+  .timeline-content p {
+    color: var(--text-secondary);
+    margin: 0;
+    line-height: 1.5;
+  }
+
+  .achievements-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+    margin-top: 20px;
+  }
+
+  .achievement {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 15px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+  }
+
+  .achievement-icon {
+    font-size: 1.5rem;
+  }
+
+  .achievement-text {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+  }
+
+  .tech-categories {
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    margin: 30px 0;
+  }
+
+  .tech-category h3 {
+    margin: 0 0 15px 0;
+    font-size: 1.3rem;
+  }
+
+  .tech-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .tech-tag {
+    padding: 5px 12px;
+    border: 1px solid;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    background: rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
+  }
+
+  .tech-tag:hover {
+    background: rgba(0, 0, 0, 0.5);
+    transform: translateY(-2px);
+  }
+
+  .philosophy-points {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-top: 20px;
+  }
+
+  .philosophy-point {
+    color: var(--text-secondary);
+    padding: 15px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    border-left: 4px solid var(--primary-green);
+  }
+
+  .content-footer {
+    margin-top: 50px;
+    padding-top: 30px;
+    border-top: 1px solid var(--terminal-border);
+  }
+
+  .footer-cta {
+    text-align: center;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 12px;
+    padding: 30px;
+  }
+
+  .footer-cta h3 {
+    color: var(--primary-green);
+    margin: 0 0 10px 0;
+  }
+
+  .footer-cta p {
+    color: var(--text-secondary);
+    margin: 0 0 20px 0;
+  }
+
+  .cta-buttons {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+  }
+
+  .cta-btn {
+    padding: 12px 24px;
+    border: 2px solid;
+    border-radius: 6px;
+    text-decoration: none;
+    font-weight: bold;
+    transition: all 0.3s ease;
+  }
+
+  .cta-btn.primary {
+    background: var(--primary-green);
+    border-color: var(--primary-green);
+    color: var(--bg-dark);
+  }
+
+  .cta-btn.secondary {
+    background: transparent;
+    border-color: var(--secondary-pink);
+    color: var(--secondary-pink);
+  }
+
+  .cta-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  }
+
+  /* Адаптивность */
+  @media (max-width: 768px) {
+    .about-page {
+      height: auto;
+      min-height: 100vh;
+    }
+
+    .content-scroll {
+      padding: 20px;
+    }
+
+    .section-header h1 {
+      font-size: 2rem;
+    }
+
+    .vision-grid, .values-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .cta-buttons {
+      flex-direction: column;
+    }
+
+    .timeline-item {
+      flex-direction: column;
+    }
+
+    .timeline-marker {
+      flex-direction: row;
+      margin-bottom: 10px;
+    }
+
+    .marker-line {
+      width: 100%;
+      height: 2px;
+      margin: 0 10px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/(main)/blog/+page.svelte b/src/routes/(main)/blog/+page.svelte
new file mode 100644
index 0000000..3a34d67
--- /dev/null
+++ b/src/routes/(main)/blog/+page.svelte
@@ -0,0 +1,837 @@
+<script>
+  import { onMount, beforeUpdate } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { Container, Row, Col } from '@sveltestrap/sveltestrap';
+  import CRTScreen from '$lib/components/CRTScreen.svelte';
+  import { blogService } from '$lib/services/blogService.js';
+  import { getRelativeTime } from '$lib/utils/date.js';
+
+  // Реактивные переменные
+  const blogPosts = writable([]);
+  const blogMetadata = writable(null);
+  const loading = writable(true);
+  const loadingMore = writable(false);
+  const error = writable(null);
+  
+  // Пагинация
+  const currentPage = writable(1);
+  const hasMore = writable(true);
+  const postsPerPage = 6;
+
+  const selectedFilters = writable({
+    category: 'all',
+    tag: null,
+    author: 'all'
+  });
+
+  const expandedSections = writable(new Set(['categories']));
+  const isMobile = writable(false);
+
+  onMount(async () => {
+    isMobile.set(window.innerWidth < 768);
+    await loadBlogData();
+    
+    const handleResize = () => isMobile.set(window.innerWidth < 768);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  });
+
+  beforeUpdate(() => {
+    $selectedFilters;
+    currentPage.set(1);
+    hasMore.set(true);
+  });
+
+  // Загрузка данных блога
+  async function loadBlogData() {
+    try {
+      loading.set(true);
+      error.set(null);
+      blogPosts.set([]);
+
+      // Загружаем метаданные и первую страницу постов
+      const [metadata, posts] = await Promise.all([
+        blogService.getBlogMetadata(),
+        blogService.getBlogPosts({ 
+          limit: postsPerPage
+        })
+      ]);
+
+      blogMetadata.set(metadata);
+      blogPosts.set(posts);
+      
+      // Проверяем есть ли еще посты
+      hasMore.set(posts.length === postsPerPage);
+
+    } catch (err) {
+      console.error('Error loading blog data:', err);
+      error.set('Ошибка загрузки данных блога. Пожалуйста, попробуйте позже.');
+    } finally {
+      loading.set(false);
+    }
+  }
+
+  // Загрузка дополнительных постов
+  async function loadMorePosts() {
+    if ($loadingMore || !$hasMore) return;
+
+    try {
+      loadingMore.set(true);
+      const nextPage = $currentPage + 1;
+
+      const newPosts = await blogService.getBlogPosts({ 
+        limit: postsPerPage,
+        ...buildApiFilters($selectedFilters)
+      });
+
+      if (newPosts.length > 0) {
+        blogPosts.update(posts => [...posts, ...newPosts]);
+        currentPage.set(nextPage);
+        hasMore.set(newPosts.length === postsPerPage);
+      } else {
+        hasMore.set(false);
+      }
+
+    } catch (err) {
+      console.error('Error loading more posts:', err);
+      error.set('Ошибка загрузки дополнительных статей.');
+    } finally {
+      loadingMore.set(false);
+    }
+  }
+
+  // Построение параметров для API
+  function buildApiFilters(filters) {
+    const apiFilters = {};
+    
+    if (filters.category !== 'all') {
+      apiFilters.category = filters.category;
+    }
+    
+    if (filters.tag) {
+      apiFilters.tag = filters.tag;
+    }
+    
+    if (filters.author !== 'all') {
+      apiFilters.username = filters.author;
+    }
+    
+    return apiFilters;
+  }
+
+  // Применение фильтров
+  async function applyFilter(type, value) {
+    selectedFilters.update(filters => {
+      const newFilters = { ...filters };
+      
+      if (type === 'category') {
+        newFilters.category = value;
+        newFilters.tag = null;
+      } else if (type === 'tag') {
+        newFilters.tag = value;
+      } else if (type === 'author') {
+        newFilters.author = value;
+      }
+      
+      return newFilters;
+    });
+    
+    // Сбрасываем пагинацию и загружаем заново
+    currentPage.set(1);
+    hasMore.set(true);
+    await loadFilteredPosts();
+  }
+
+  // Загрузка отфильтрованных постов
+  async function loadFilteredPosts() {
+    try {
+      loading.set(true);
+      blogPosts.set([]);
+
+      const posts = await blogService.getBlogPosts({ 
+        limit: postsPerPage,
+        ...buildApiFilters($selectedFilters)
+      });
+
+      blogPosts.set(posts);
+      hasMore.set(posts.length === postsPerPage);
+
+    } catch (err) {
+      console.error('Error loading filtered posts:', err);
+      error.set('Ошибка применения фильтров. Пожалуйста, попробуйте снова.');
+    } finally {
+      loading.set(false);
+    }
+  }
+
+  // Вспомогательные функции
+  function toggleSection(sectionName) {
+    expandedSections.update(set => {
+      const newSet = new Set(set);
+      newSet.has(sectionName) ? newSet.delete(sectionName) : newSet.add(sectionName);
+      return newSet;
+    });
+  }
+
+  function isExpanded(sectionName) {
+    return $expandedSections.has(sectionName);
+  }
+
+  function isActiveFilter(type, value) {
+    return $selectedFilters[type] === value;
+  }
+
+  function clearAllFilters() {
+    selectedFilters.set({
+      category: 'all',
+      tag: null,
+      author: 'all'
+    });
+    currentPage.set(1);
+    hasMore.set(true);
+    loadFilteredPosts();
+  }
+
+  // Генерация структуры tree из метаданных
+  $: filterTree = $blogMetadata ? {
+    name: "blog",
+    type: "directory",
+    children: [
+      {
+        name: "categories",
+        type: "directory",
+        children: [
+          { name: "all", type: "file", count: $blogMetadata.totalPosts },
+          ...$blogMetadata.categories.map(cat => ({
+            name: cat.name,
+            type: "file",
+            count: cat.count
+          }))
+        ]
+      },
+      {
+        name: "tags",
+        type: "directory", 
+        children: $blogMetadata.tags.map(tag => ({
+          name: tag.name,
+          type: "file",
+          count: tag.count
+        }))
+      },
+      {
+        name: "authors",
+        type: "directory",
+        children: [
+          { name: "all", type: "file", count: $blogMetadata.totalPosts },
+          ...$blogMetadata.authors.map(author => ({
+            name: author.name,
+            type: "file", 
+            count: author.count
+          }))
+        ]
+      }
+    ]
+  } : null;
+</script>
+
+<section class="blog-page">
+  {#if $error}
+    <div class="error-banner">
+      <div class="error-content">
+        <span class="error-icon">⚠️</span>
+        <span class="error-message">{$error}</span>
+        <button class="retry-btn" on:click={loadBlogData}>Повторить</button>
+      </div>
+    </div>
+  {/if}
+    <Row class="h-100 g-0">
+      <!-- Левая панель - Tree меню фильтров -->
+      <Col lg={3} class="h-100">
+        <div class="panel filters-panel">
+          <CRTScreen class="filters-terminal h-100">
+            <div class="terminal-header">
+              <span class="blink">█</span> ФИЛЬТРЫ БЛОГА
+            </div>
+            
+            <div class="terminal-body filters-body">
+              {#if $loading && !$blogMetadata}
+                <div class="loading-state">
+                  <div class="loading-spinner"></div>
+                  <span>Загрузка фильтров...</span>
+                </div>
+              {:else if $blogMetadata}
+                <div class="filters-tree">
+                  {#each filterTree.children as section}
+                    <div class="tree-section">
+                      <div 
+                        class="tree-item directory section-header"
+                        on:click={() => toggleSection(section.name)}
+                      >
+                        <span class="folder-icon">
+                          {isExpanded(section.name) ? '📂' : '📁'}
+                        </span>
+                        <span class="section-name">{section.name}/</span>
+                        <span class="section-arrow">
+                          {isExpanded(section.name) ? '▼' : '▶'}
+                        </span>
+                      </div>
+                      
+                      {#if isExpanded(section.name)}
+                        <div class="tree-children">
+                          {#each section.children as filter}
+                            <div 
+                              class="tree-item file filter-item"
+                              class:active={isActiveFilter(
+                                section.name === 'categories' ? 'category' :
+                                section.name === 'tags' ? 'tag' : 'author',
+                                filter.name
+                              )}
+                              on:click={() => applyFilter(
+                                section.name === 'categories' ? 'category' :
+                                section.name === 'tags' ? 'tag' : 'author',
+                                filter.name
+                              )}
+                            >
+                              <span class="file-icon">📄</span>
+                              <span class="filter-name">{filter.name}</span>
+                              <span class="filter-count">({filter.count})</span>
+                            </div>
+                          {/each}
+                        </div>
+                      {/if}
+                    </div>
+                  {/each}
+                </div>
+
+                <div class="active-filters">
+                  <div class="filters-header">
+                    <span class="filters-title">АКТИВНЫЕ ФИЛЬТРЫ:</span>
+                    <button class="clear-all" on:click={clearAllFilters}>Сбросить все</button>
+                  </div>
+                  
+                  {#if $selectedFilters.category !== 'all'}
+                    <div class="active-filter">
+                      <span class="filter-type">Категория:</span>
+                      <span class="filter-value">{$selectedFilters.category}</span>
+                      <button 
+                        class="clear-filter"
+                        on:click={() => applyFilter('category', 'all')}
+                      >×</button>
+                    </div>
+                  {/if}
+                  
+                  {#if $selectedFilters.tag}
+                    <div class="active-filter">
+                      <span class="filter-type">Тег:</span>
+                      <span class="filter-value">{$selectedFilters.tag}</span>
+                      <button 
+                        class="clear-filter"
+                        on:click={() => applyFilter('tag', null)}
+                      >×</button>
+                    </div>
+                  {/if}
+                  
+                  {#if $selectedFilters.author !== 'all'}
+                    <div class="active-filter">
+                      <span class="filter-type">Автор:</span>
+                      <span class="filter-value">{$selectedFilters.author}</span>
+                      <button 
+                        class="clear-filter"
+                        on:click={() => applyFilter('author', 'all')}
+                      >×</button>
+                    </div>
+                  {/if}
+                </div>
+              {:else}
+                <div class="error-state">
+                  <span class="error-icon">❌</span>
+                  <span>Ошибка загрузки фильтров</span>
+                </div>
+              {/if}
+            </div>
+          </CRTScreen>
+        </div>
+      </Col>
+
+      <!-- Правая панель - Карточки статей -->
+      <Col lg={9} class="h-100">
+        <div class="panel articles-panel">
+          <CRTScreen class="articles-terminal h-100">
+            <div class="terminal-header">
+              <span class="blink">█</span> 
+              СТАТЬИ 
+              {#if $loading}
+                <span class="loading-dots">
+                  <span class="dot">.</span>
+                  <span class="dot">.</span>
+                  <span class="dot">.</span>
+                </span>
+              {/if}
+            </div>
+            
+            <div class="terminal-body articles-body">
+              {#if $loading && $blogPosts.length === 0}
+                <div class="loading-state">
+                  <div class="loading-spinner"></div>
+                  <span>Загрузка статей из API...</span>
+                </div>
+              {:else if $blogPosts.length === 0}
+                <div class="no-articles">
+                  <div class="no-articles-icon"></div>
+                  <h3>Статьи не найдены</h3>
+                  <p>Попробуйте изменить фильтры или проверьте позже</p>
+                  <button class="retry-btn" on:click={clearAllFilters}>Показать все статьи</button>
+                </div>
+              {:else}
+                <div class="articles-container">
+                  <div class="articles-grid">
+                    {#each $blogPosts as post}
+                      <article class="article-card">
+                        <div class="card-header">
+                          <h3 class="article-title">
+                            <a href={`/blog/${post.id}`}>{post.title}</a>
+                          </h3>
+                          <div class="article-meta">
+                            <span class="meta-item">
+                              <span class="meta-icon"></span>
+                              {getRelativeTime(post.updatedAt)}
+                            </span>
+                            <span class="meta-item">
+                              <span class="meta-icon"></span>
+                              {post.username}
+                            </span>
+                            <span class="meta-item">
+                              <span class="meta-icon"></span>
+                              {post.category}
+                            </span>
+                          </div>
+                        </div>
+
+                        <p class="article-description">{post.description}</p>
+
+                        <div class="card-footer">
+                          <div class="article-tags">
+                            {#each post.tags as tag}
+                              <span 
+                                class="tag"
+                                on:click={() => applyFilter('tag', tag)}
+                              >#{tag}</span>
+                            {/each}
+                          </div>
+                          
+                          <a href={`/blog/${post.id}`} class="read-link">
+                            ЧИТАТЬ СТАТЬЮ →
+                          </a>
+                        </div>
+                      </article>
+                    {/each}
+                  </div>
+
+                  <!-- Кнопка загрузить еще -->
+                  {#if $hasMore}
+                    <div class="load-more-container">
+                      {#if $loadingMore}
+                        <div class="loading-more">
+                          <div class="loading-spinner small"></div>
+                          <span>Загрузка дополнительных статей...</span>
+                        </div>
+                      {:else}
+                        <button class="load-more-btn" on:click={loadMorePosts}>
+                          <span class="btn-icon"></span>
+                          ЗАГРУЗИТЬ ЕЩЕ
+                        </button>
+                      {/if}
+                    </div>
+                  {:else if $blogPosts.length > 0}
+                    <div class="end-of-list">
+                      <span class="end-icon"></span>
+                      <span>Вы достигли конца! Загружено {$blogPosts.length} статей.</span>
+                    </div>
+                  {/if}
+                </div>
+              {/if}
+            </div>
+          </CRTScreen>
+        </div>
+      </Col>
+    </Row>
+</section>
+
+<style>
+  .blog-page {
+    min-height: 100vh;
+    padding-top: 50px;
+    background: var(--bg-dark);
+  }
+
+  .panel {
+    height: 100%;
+    border: 1px solid var(--terminal-border);
+    background: rgba(10, 10, 10, 0.9);
+  }
+
+
+  .terminal-header {
+    background: var(--primary-green);
+    color: var(--bg-dark);
+    padding: 12px 20px;
+    font-weight: bold;
+    border-bottom: 2px solid var(--bg-dark);
+    font-size: 0.9rem;
+    font-family: 'Courier New', monospace;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+
+  .terminal-body {
+    flex: 1;
+    padding: 20px;
+    overflow: auto;
+  }
+
+  /* Tree меню фильтров */
+  .filters-tree {
+    font-family: 'JetBrains Mono', 'Courier New', monospace;
+    font-size: 0.9rem;
+  }
+
+  .tree-section {
+    margin-bottom: 15px;
+  }
+
+  .section-header {
+    cursor: pointer;
+    padding: 8px 12px;
+    border-radius: 5px;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--primary-green);
+    font-weight: bold;
+  }
+
+  .section-header:hover {
+    background: rgba(51, 255, 0, 0.1);
+  }
+
+  .folder-icon {
+    font-size: 1rem;
+  }
+
+  .section-name {
+    flex: 1;
+    text-transform: uppercase;
+  }
+
+  .section-arrow {
+    color: var(--text-muted);
+  }
+
+  .tree-children {
+    margin-left: 25px;
+    margin-top: 5px;
+  }
+
+  .filter-item {
+    cursor: pointer;
+    padding: 6px 10px;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--text-secondary);
+    margin-bottom: 2px;
+  }
+
+  .filter-item:hover {
+    background: rgba(51, 255, 0, 0.05);
+    color: var(--primary-green);
+  }
+
+  .filter-item.active {
+    background: rgba(51, 255, 0, 0.2);
+    color: var(--primary-green);
+    border-left: 3px solid var(--primary-green);
+  }
+
+  .filter-name {
+    flex: 1;
+    text-transform: lowercase;
+  }
+
+  .filter-count {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+  }
+
+  .file-icon {
+    font-size: 0.9rem;
+  }
+
+  /* Активные фильтры */
+  .active-filters {
+    margin-top: 20px;
+    padding-top: 15px;
+    border-top: 1px solid var(--terminal-border);
+  }
+
+  .filters-title {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+  }
+
+  .active-filter {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 5px 10px;
+    background: rgba(51, 255, 0, 0.1);
+    border-radius: 4px;
+    margin-bottom: 5px;
+    font-size: 0.8rem;
+  }
+
+  .filter-type {
+    color: var(--text-muted);
+  }
+
+  .filter-value {
+    color: var(--primary-green);
+    flex: 1;
+  }
+
+  .clear-filter {
+    background: none;
+    border: none;
+    color: var(--secondary-pink);
+    cursor: pointer;
+    font-size: 1.2rem;
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .clear-filter:hover {
+    color: var(--primary-green);
+  }
+
+  /* Сетка статей */
+  .articles-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 20px;
+    padding: 10px 0;
+  }
+
+  .article-card {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    padding: 20px;
+    transition: all 0.3s ease;
+    position: relative;
+  }
+
+  .article-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 30px rgba(51, 255, 0, 0.1);
+    border-color: var(--primary-green);
+  }
+
+
+  .card-header {
+    margin-bottom: 15px;
+  }
+
+  .article-title {
+    margin: 0 0 10px 0;
+  }
+
+  .article-title a {
+    color: var(--primary-green);
+    text-decoration: none;
+    font-size: 1.2rem;
+    transition: all 0.3s ease;
+  }
+
+  .article-title a:hover {
+    color: var(--secondary-pink);
+  }
+
+  .article-meta {
+    display: flex;
+    gap: 15px;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+  }
+
+  .meta-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+  }
+
+  .article-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+  }
+
+  .tag {
+    background: rgba(255, 0, 170, 0.1);
+    color: var(--secondary-pink);
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 0.7rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border: 1px solid transparent;
+  }
+
+  .tag:hover {
+    background: rgba(255, 0, 170, 0.2);
+    border-color: var(--secondary-pink);
+  }
+
+
+  .read-link {
+    color: var(--secondary-pink);
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 0.9rem;
+    transition: all 0.3s ease;
+    display: inline-block;
+  }
+
+  .read-link:hover {
+    color: var(--primary-green);
+    transform: translateX(5px);
+  }
+
+  /* Сообщение об отсутствии статей */
+  .no-articles {
+    text-align: center;
+    padding: 60px 20px;
+    color: var(--text-muted);
+  }
+
+  .no-articles-icon {
+    font-size: 3rem;
+    margin-bottom: 20px;
+  }
+
+  .no-articles h3 {
+    color: var(--primary-green);
+    margin-bottom: 10px;
+  }
+
+  /* Адаптивность */
+  @media (max-width: 992px) {
+    .articles-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .blog-page {
+      height: auto;
+      min-height: 100vh;
+    }
+
+    .filters-panel {
+      height: 300px;
+    }
+
+    .articles-panel {
+      height: auto;
+    }
+
+    .terminal-body {
+      padding: 15px;
+    }
+
+    .tree-children {
+      margin-left: 15px;
+    }
+
+    .article-card {
+      padding: 15px;
+    }
+
+    .card-footer {
+      flex-direction: column;
+      gap: 10px;
+      align-items: flex-start;
+    }
+  }
+
+  @media (max-width: 576px) {
+    .articles-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .article-meta {
+      flex-direction: column;
+      gap: 5px;
+    }
+
+    .terminal-body {
+      padding: 10px;
+    }
+  }
+
+    .load-more-btn {
+    width: 100%;
+    padding: 15px;
+    background: rgba(51, 255, 0, 0.1);
+    border: 2px solid var(--primary-green);
+    color: var(--primary-green);
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+  }
+
+  .load-more-btn:hover {
+    background: var(--primary-green);
+    color: var(--bg-dark);
+    transform: translateY(-2px);
+  }
+
+    .clear-all {
+    background: none;
+    border: 1px solid var(--secondary-pink);
+    color: var(--secondary-pink);
+    padding: 2px 8px;
+    border-radius: 3px;
+    font-size: 0.7rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+  }
+
+  .clear-all:hover {
+    background: var(--secondary-pink);
+    color: var(--bg-dark);
+  }
+</style>
+
diff --git a/src/routes/(main)/blog/[id]/+page.js b/src/routes/(main)/blog/[id]/+page.js
new file mode 100644
index 0000000..65e9e96
--- /dev/null
+++ b/src/routes/(main)/blog/[id]/+page.js
@@ -0,0 +1,5 @@
+export async function load({ params }) {
+  return {
+    id: params.id
+  };
+}
\ No newline at end of file
diff --git a/src/routes/(main)/blog/[id]/+page.svelte b/src/routes/(main)/blog/[id]/+page.svelte
new file mode 100644
index 0000000..bbc1d82
--- /dev/null
+++ b/src/routes/(main)/blog/[id]/+page.svelte
@@ -0,0 +1,657 @@
+<script>
+  import { onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { Container, Row, Col } from '@sveltestrap/sveltestrap';
+  import CRTScreen from '$lib/components/CRTScreen.svelte';
+  import { blogService } from '$lib/services/blogService.js';
+  import { formatDateTime, getRelativeTime } from '$lib/utils/date.js';
+
+  export let data;
+  const { id } = data;
+
+  // Реактивные переменные
+  const post = writable(null);
+  const loading = writable(true);
+  const error = writable(null);
+  const relatedPosts = writable([]);
+  const isMobile = writable(false);
+
+  onMount(async () => {
+    isMobile.set(window.innerWidth < 768);
+    await loadPostData();
+    
+    const handleResize = () => isMobile.set(window.innerWidth < 768);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  });
+
+  // Загрузка данных статьи
+  async function loadPostData() {
+    try {
+      loading.set(true);
+      error.set(null);
+
+      const postData = await blogService.getPostById(id);
+      
+      if (!postData) {
+        throw new Error('Статья не найдена');
+      }
+
+      post.set(postData);
+      
+      // Загружаем похожие статьи
+      await loadRelatedPosts(postData);
+
+    } catch (err) {
+      console.error('Error loading post:', err);
+      error.set('Статья не найдена или произошла ошибка загрузки.');
+    } finally {
+      loading.set(false);
+    }
+  }
+
+  // Загрузка похожих статей
+  async function loadRelatedPosts(currentPost) {
+    try {
+      const allPosts = await blogService.getBlogPosts();
+      
+      // Фильтруем похожие статьи по категории и тегам
+      const related = allPosts
+        .filter(p => p.id !== currentPost.id) // Исключаем текущую статью
+        .filter(p => 
+          p.category === currentPost.category || 
+          (p.tags && currentPost.tags && p.tags.some(tag => currentPost.tags.includes(tag)))
+        )
+        .slice(0, 3); // Берем максимум 3 статьи
+      
+      relatedPosts.set(related);
+    } catch (err) {
+      console.error('Error loading related posts:', err);
+    }
+  }
+
+  // Функция для парсинга тегов (если они приходят как строка)
+  function parseTags(tags) {
+    if (Array.isArray(tags)) {
+      return tags;
+    }
+    if (typeof tags === 'string') {
+      return tags.split(',').map(tag => tag.trim()).filter(tag => tag);
+    }
+    return [];
+  }
+
+  // Функция для форматирования контента (если нужно добавить разметку)
+  function formatContent(content) {
+    if (!content) return '';
+    
+    // Простая обработка переносов строк
+    return content.replace(/\n/g, '<br>');
+  }
+</script>
+
+<section class="post-page">
+  {#if $error}
+    <div class="error-banner">
+      <div class="error-content">
+        <span class="error-icon">⚠️</span>
+        <span class="error-message">{$error}</span>
+        <button class="retry-btn" on:click={loadPostData}>Повторить</button>
+        <a href="/blog" class="back-btn">← Назад к статьям</a>
+      </div>
+    </div>
+  {/if}
+
+    <Row class="h-100 g-0">
+      <!-- Основной контент статьи -->
+      <Col lg={8} class="h-100">
+        <div class="panel post-panel">
+          <CRTScreen class="post-terminal h-100">
+            <div class="terminal-header">
+              <span class="blink">█</span> 
+              {#if $post}
+                ЧТЕНИЕ СТАТЬИ: {$post.title}
+              {:else}
+                ЗАГРУЗКА СТАТЬИ...
+              {/if}
+            </div>
+            
+            <div class="terminal-body post-body">
+              {#if $loading}
+                <div class="loading-state">
+                  <div class="loading-spinner"></div>
+                  <span>Загрузка статьи...</span>
+                </div>
+              {:else if $post}
+                <div class="post-content">
+                  <!-- Хедер статьи -->
+                  <header class="post-header">
+                    <nav class="breadcrumb">
+                      <a href="/blog" class="breadcrumb-link">Блог</a>
+                      <span class="breadcrumb-separator">/</span>
+                      <span class="breadcrumb-current">{$post.title}</span>
+                    </nav>
+                    
+                    <h1 class="post-title">{$post.title}</h1>
+                    
+                    <div class="post-meta">
+                      <div class="meta-grid">
+                        <div class="meta-item">
+                          <span class="meta-icon"></span>
+                          <span class="meta-label">Автор:</span>
+                          <span class="meta-value">{$post.username}</span>
+                        </div>
+                        <div class="meta-item">
+                          <span class="meta-icon"></span>
+                          <span class="meta-label">Опубликовано:</span>
+                          <span class="meta-value">{formatDateTime($post.createdAt)}</span>
+                        </div>
+                        <div class="meta-item">
+                          <span class="meta-icon"></span>
+                          <span class="meta-label">Обновлено:</span>
+                          <span class="meta-value">{getRelativeTime($post.updatedAt)}</span>
+                        </div>
+                        <div class="meta-item">
+                          <span class="meta-icon"></span>
+                          <span class="meta-label">Категория:</span>
+                          <span class="meta-value category-tag">{$post.category}</span>
+                        </div>
+                      </div>
+                    </div>
+
+                    {#if $post.tags && $post.tags.length > 0}
+                      <div class="post-tags">
+                        {#each parseTags($post.tags) as tag}
+                          <span class="tag">#{tag}</span>
+                        {/each}
+                      </div>
+                    {/if}
+                  </header>
+
+                  <!-- Описание статьи -->
+                  {#if $post.description}
+                    <div class="post-description">
+                      <h3>📋 Описание</h3>
+                      <p>{$post.description}</p>
+                    </div>
+                  {/if}
+
+                  <!-- Основной контент -->
+                  <article class="post-article">
+                    <h3>📖 Содержание</h3>
+                    <div class="content">{$post.content}</div>
+                  </article>
+
+                  <!-- Футер статьи -->
+                  <footer class="post-footer">
+                    <div class="footer-actions">
+                      <a href="/blog" class="action-btn">
+                        <span class="btn-icon">←</span>
+                        Назад к статьям
+                      </a>
+                      <button class="action-btn" on:click={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
+                        <span class="btn-icon">↑</span>
+                        Наверх
+                      </button>
+                    </div>
+                  </footer>
+                </div>
+              {:else}
+                <div class="not-found">
+                  <div class="not-found-icon">❌</div>
+                  <h3>Статья не найдена</h3>
+                  <p>Запрошенная статья не существует или была удалена.</p>
+                  <a href="/blog" class="back-link">Вернуться к списку статей</a>
+                </div>
+              {/if}
+            </div>
+          </CRTScreen>
+        </div>
+      </Col>
+
+      <!-- Боковая панель с похожими статьями -->
+      <Col lg={4} class="h-100">
+        <div class="panel sidebar-panel">
+          <CRTScreen class="sidebar-terminal h-100">
+            <div class="terminal-header">
+              <span class="blink">█</span> ПОХОЖИЕ СТАТЬИ
+            </div>
+            
+            <div class="terminal-body sidebar-body">
+              {#if $relatedPosts.length > 0}
+                <div class="related-posts">
+                  <h3>📚 Вам может понравиться</h3>
+                  
+                  {#each $relatedPosts as relatedPost}
+                    <article class="related-post-card">
+                      <h4 class="related-title">
+                        <a href="/blog/{relatedPost.id}">{relatedPost.title}</a>
+                      </h4>
+                      
+                      <div class="related-meta">
+                        <span class="related-category">{relatedPost.category}</span>
+                        <span class="related-date">{getRelativeTime(relatedPost.updatedAt)}</span>
+                      </div>
+                      
+                      {#if relatedPost.description}
+                        <p class="related-description">{relatedPost.description}</p>
+                      {/if}
+                      
+                      <a href="/blog/{relatedPost.id}" class="related-link">
+                        Читать далее →
+                      </a>
+                    </article>
+                  {/each}
+                </div>
+              {:else}
+                <div class="no-related">
+                  <span class="no-related-icon">📝</span>
+                  <p>Нет похожих статей</p>
+                  <a href="/blog" class="browse-link">Перейти ко всем статьям</a>
+                </div>
+              {/if}
+
+              <!-- Информация о статье -->
+              {#if $post}
+                <div class="post-info">
+                  <h3>ℹ️ Информация</h3>
+                  <div class="info-grid">
+                    <div class="info-item">
+                      <span class="info-label">ID статьи:</span>
+                      <span class="info-value">{$post.id}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">Автор ID:</span>
+                      <span class="info-value">{$post.userId}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">Создана:</span>
+                      <span class="info-value">{formatDateTime($post.createdAt)}</span>
+                    </div>
+                    <div class="info-item">
+                      <span class="info-label">Обновлена:</span>
+                      <span class="info-value">{formatDateTime($post.updatedAt)}</span>
+                    </div>
+                  </div>
+                </div>
+              {/if}
+            </div>
+          </CRTScreen>
+        </div>
+      </Col>
+    </Row>
+</section>
+
+<style>
+  .post-page {
+    height: 100vh;
+    padding-top: 50px;
+    background: var(--bg-dark);
+    overflow: hidden;
+  }
+
+  .panel {
+    height: 100%;
+    border: 1px solid var(--terminal-border);
+    background: rgba(10, 10, 10, 0.9);
+  }
+
+
+  .terminal-header {
+    background: var(--primary-green);
+    color: var(--bg-dark);
+    padding: 12px 20px;
+    font-weight: bold;
+    border-bottom: 2px solid var(--bg-dark);
+    font-size: 0.9rem;
+    font-family: 'Courier New', monospace;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .terminal-body {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .post-body {
+    padding: 0;
+  }
+
+  .post-content {
+    flex: 1;
+    padding: 30px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+  }
+
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 20px;
+    font-size: 0.9rem;
+    color: var(--text-muted);
+  }
+
+  .breadcrumb-link {
+    color: var(--primary-green);
+    text-decoration: none;
+    transition: all 0.3s ease;
+  }
+
+  .breadcrumb-link:hover {
+    color: var(--secondary-pink);
+  }
+
+  .breadcrumb-separator {
+    color: var(--text-muted);
+  }
+
+  .breadcrumb-current {
+    color: var(--text-secondary);
+  }
+
+  .post-title {
+    color: var(--primary-green);
+    font-size: 2.2rem;
+    margin: 0 0 20px 0;
+    line-height: 1.3;
+    font-weight: bold;
+  }
+
+  .post-meta {
+    margin-bottom: 20px;
+  }
+
+  .meta-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 15px;
+    margin-bottom: 15px;
+  }
+
+  .meta-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.9rem;
+  }
+
+  .meta-icon {
+    font-size: 1rem;
+  }
+
+  .meta-label {
+    color: var(--text-muted);
+    font-weight: bold;
+  }
+
+  .meta-value {
+    color: var(--text-secondary);
+  }
+
+  .category-tag {
+    background: rgba(51, 255, 0, 0.1);
+    color: var(--primary-green);
+    padding: 2px 8px;
+    border-radius: 4px;
+    border: 1px solid var(--primary-green);
+  }
+
+  .post-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 20px;
+  }
+
+  .tag {
+    background: rgba(255, 0, 170, 0.1);
+    color: var(--secondary-pink);
+    padding: 4px 10px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    border: 1px solid var(--secondary-pink);
+    transition: all 0.3s ease;
+  }
+
+  .tag:hover {
+    background: rgba(255, 0, 170, 0.2);
+    transform: translateY(-1px);
+  }
+
+  .post-description {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 20px;
+  }
+
+  .post-description h3 {
+    color: var(--primary-green);
+    margin: 0 0 10px 0;
+    font-size: 1.2rem;
+  }
+
+  .post-description p {
+    color: var(--text-secondary);
+    line-height: 1.6;
+    margin: 0;
+    font-size: 1rem;
+  }
+
+  .post-article {
+    flex: 1;
+  }
+
+  .post-article h3 {
+    color: var(--primary-green);
+    margin: 0 0 20px 0;
+    font-size: 1.4rem;
+  }
+
+  .content {
+    color: var(--text-secondary);
+    line-height: 1.7;
+    font-size: 1.1rem;
+  }
+
+  .content br {
+    margin-bottom: 10px;
+  }
+
+  .post-footer {
+    margin-top: 40px;
+    padding-top: 20px;
+    border-top: 1px solid var(--terminal-border);
+  }
+
+  .footer-actions {
+    display: flex;
+    gap: 15px;
+    justify-content: space-between;
+  }
+
+  .action-btn {
+    background: rgba(51, 255, 0, 0.1);
+    border: 1px solid var(--primary-green);
+    color: var(--primary-green);
+    padding: 10px 20px;
+    border-radius: 5px;
+    text-decoration: none;
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+  }
+
+  .action-btn:hover {
+    background: var(--primary-green);
+    color: var(--bg-dark);
+    transform: translateY(-2px);
+  }
+
+  /* Боковая панель */
+  .sidebar-body {
+    padding: 20px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+  }
+
+  .related-posts h3 {
+    color: var(--primary-green);
+    margin: 0 0 20px 0;
+    font-size: 1.2rem;
+  }
+
+  .related-post-card {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    padding: 15px;
+    margin-bottom: 15px;
+    transition: all 0.3s ease;
+  }
+
+  .related-post-card:hover {
+    border-color: var(--primary-green);
+    transform: translateX(5px);
+  }
+
+  .related-title {
+    margin: 0 0 10px 0;
+  }
+
+  .related-title a {
+    color: var(--primary-green);
+    text-decoration: none;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+  }
+
+  .related-title a:hover {
+    color: var(--secondary-pink);
+  }
+
+  .related-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin-bottom: 10px;
+  }
+
+  .related-description {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    line-height: 1.4;
+    margin: 0 0 10px 0;
+  }
+
+  .related-link {
+    color: var(--secondary-pink);
+    text-decoration: none;
+    font-size: 0.9rem;
+    font-weight: bold;
+    transition: all 0.3s ease;
+  }
+
+  .related-link:hover {
+    color: var(--primary-green);
+  }
+
+  .no-related {
+    text-align: center;
+    color: var(--text-muted);
+    padding: 20px 0;
+  }
+
+  .no-related-icon {
+    font-size: 2rem;
+    margin-bottom: 10px;
+    display: block;
+  }
+
+  .browse-link {
+    color: var(--primary-green);
+    text-decoration: none;
+    margin-top: 10px;
+    display: inline-block;
+  }
+
+  .post-info {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    padding: 15px;
+  }
+
+  .post-info h3 {
+    color: var(--primary-green);
+    margin: 0 0 15px 0;
+    font-size: 1.1rem;
+  }
+
+  .info-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .info-item {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.8rem;
+  }
+
+  .info-label {
+    color: var(--text-muted);
+  }
+
+  .info-value {
+    color: var(--text-secondary);
+    font-family: 'Courier New', monospace;
+  }
+
+  /* Адаптивность */
+  @media (max-width: 768px) {
+    .post-page {
+      height: auto;
+      min-height: 100vh;
+    }
+
+    .post-content {
+      padding: 20px;
+      gap: 20px;
+    }
+
+    .post-title {
+      font-size: 1.8rem;
+    }
+
+    .meta-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .footer-actions {
+      flex-direction: column;
+    }
+
+    .sidebar-body {
+      padding: 15px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/(main)/team/+page.svelte b/src/routes/(main)/team/+page.svelte
new file mode 100644
index 0000000..0ffc9dd
--- /dev/null
+++ b/src/routes/(main)/team/+page.svelte
@@ -0,0 +1,827 @@
+<script>
+  import { onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { Container, Row, Col } from '@sveltestrap/sveltestrap';
+  import GlitchText from '$lib/components/GlitchText.svelte';
+  import CRTScreen from '$lib/components/CRTScreen.svelte';
+
+  // Данные команды
+  const teamMembers = [
+    {
+      id: 1,
+      username: "coma",
+      name: "Coma",
+      role: "DevOps Engineer",
+      specialty: "Системное администрирование & Девопс",
+      description: "Отвечает за инфраструктуру, развертывание и мониторинг. Следит за тем, чтобы все системы работали как часы.",
+      skills: ["Docker", "Kubernetes", "AWS", "CI/CD", "Linux", "Monitoring"],
+      avatar: "⚙️",
+      joinDate: "2023",
+      projects: ["Infrastructure", "Deployment", "Monitoring"],
+      motto: "Если что-то можно автоматизировать - это должно быть автоматизировано"
+    },
+    {
+      id: 2,
+      username: "muts",
+      name: "Muts", 
+      role: "Embedded/Backend Developer",
+      specialty: "Встроенные системы & Бэкенд разработка",
+      description: "Работает на стыке hardware и software. Создает эффективные решения для встроенных систем и серверной части.",
+      skills: ["C/C++", "Python", "Embedded", "Rust", "API Design", "Microcontrollers"],
+      avatar: "🔌",
+      joinDate: "2023",
+      projects: ["Embedded Systems", "Backend API", "Hardware Integration"],
+      motto: "Код должен быть быстрым как железо, и надежным как скала"
+    },
+    {
+      id: 3,
+      username: "denzz",
+      name: "Denzz",
+      role: "Frontend Developer",
+      specialty: "Пользовательские интерфейсы & Веб-разработка",
+      description: "Создает интуитивные и красивые интерфейсы. Превращает сложные идеи в простые и элегантные решения.",
+      skills: ["Svelte", "JavaScript", "TypeScript", "CSS", "UI/UX", "Animation"],
+      avatar: "🎨",
+      joinDate: "2023", 
+      projects: ["Web Interfaces", "User Experience", "Visual Design"],
+      motto: "Хороший интерфейс - это когда пользователь не замечает интерфейс"
+    },
+    {
+      id: 4,
+      username: "itc1205",
+      name: "ITC1205",
+      role: "CEO & Backend Developer",
+      specialty: "Техническое руководство & Архитектура систем",
+      description: "Совмещает техническое видение с бизнес-стратегией. Отвечает за архитектурные решения и развитие команды.",
+      skills: ["System Architecture", "Project Management", "Node.js", "Python", "Leadership", "Strategy"],
+      avatar: "👑",
+      joinDate: "2023",
+      projects: ["Technical Strategy", "System Architecture", "Team Leadership"],
+      motto: "Технологии должны решать реальные проблемы, а не создавать новые"
+    },
+    {
+      id: 5,
+      username: "d1nnoise",
+      name: "D1nnoise",
+      role: "QA Engineer",
+      specialty: "Тестирование & Обеспечение качества",
+      description: "Гарантирует качество и надежность продуктов. Находит баги до того, как их найдут пользователи.",
+      skills: ["Testing", "Automation", "Quality Assurance", "Bug Tracking", "Test Planning", "CI/CD"],
+      avatar: "🐛",
+      joinDate: "2023",
+      projects: ["Quality Assurance", "Testing Automation", "Process Improvement"],
+      motto: "Идеального кода не существует, но к нему нужно стремиться"
+    }
+  ];
+
+  const selectedMember = writable(teamMembers[0]);
+  const isMobile = writable(false);
+  const activeTab = writable('info');
+
+  onMount(() => {
+    isMobile.set(window.innerWidth < 768);
+    
+    const handleResize = () => isMobile.set(window.innerWidth < 768);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  });
+
+  function selectMember(member) {
+    selectedMember.set(member);
+    activeTab.set('info');
+  }
+
+  function getRoleColor(role) {
+    const colors = {
+      'DevOps Engineer': '#00ff88',
+      'Embedded/Backend Developer': '#ff00aa', 
+      'Frontend Developer': '#00aaff',
+      'CEO & Backend Developer': '#ffaa00',
+      'QA Engineer': '#aa00ff'
+    };
+    return colors[role] || '#00ff88';
+  }
+</script>
+
+<section class="team-page">
+    <Row class="h-100 g-0">
+      <!-- Левая панель - Список команды -->
+      <Col lg={4} class="h-100">
+        <div class="panel team-list-panel">
+          <CRTScreen class="team-list-terminal h-100">
+            <div class="terminal-header">
+              <span class="blink">█</span> КОМАНДА [58]
+            </div>
+            
+            <div class="terminal-body team-list-body">
+              <div class="team-stats">
+                <div class="stat-item">
+                  <span class="stat-number">5</span>
+                  <span class="stat-label">участников</span>
+                </div>
+                <div class="stat-item">
+                  <span class="stat-number">2023</span>
+                  <span class="stat-label">год основания</span>
+                </div>
+                <div class="stat-item">
+                  <span class="stat-number">10+</span>
+                  <span class="stat-label">проектов</span>
+                </div>
+              </div>
+
+              <div class="members-list">
+                {#each teamMembers as member}
+                  <div 
+                    class="member-item"
+                    class:active={$selectedMember.id === member.id}
+                    on:click={() => selectMember(member)}
+                  >
+                    <div class="member-avatar">{member.avatar}</div>
+                    <div class="member-info">
+                      <div class="member-name">{member.name}</div>
+                      <div class="member-username">@{member.username}</div>
+                      <div 
+                        class="member-role"
+                        style="color: {getRoleColor(member.role)}"
+                      >
+                        {member.role}
+                      </div>
+                    </div>
+                    <div class="member-selector">
+                      {#if $selectedMember.id === member.id}
+                        <span class="selector-active">▶</span>
+                      {:else}
+                        <span class="selector-inactive">●</span>
+                      {/if}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+          </CRTScreen>
+        </div>
+      </Col>
+
+      <!-- Правая панель - Детали участника -->
+      <Col lg={8} class="h-100">
+        <div class="panel member-detail-panel">
+          <CRTScreen class="member-detail-terminal h-100">
+            <div class="terminal-header">
+              <span class="blink">█</span> 
+              ПРОФИЛЬ:
+            </div>
+            
+            <div class="terminal-body member-detail-body">
+              <div class="member-header">
+                <div class="avatar-section">
+                  <div class="main-avatar">{$selectedMember.avatar}</div>
+                  <div 
+                    class="role-badge"
+                    style="border-color: {getRoleColor($selectedMember.role)}; color: {getRoleColor($selectedMember.role)}"
+                  >
+                    {$selectedMember.role}
+                  </div>
+                </div>
+                
+                <div class="basic-info">
+                  <h1 class="member-name">{$selectedMember.name}</h1>
+                  <div class="member-specialty">{$selectedMember.specialty}</div>
+                  <div class="member-motto">"{$selectedMember.motto}"</div>
+                </div>
+              </div>
+
+              <!-- Навигация табов -->
+              <nav class="detail-tabs">
+                <button 
+                  class:active={$activeTab === 'info'}
+                  class="tab-btn"
+                  on:click={() => activeTab.set('info')}
+                >
+                  Информация
+                </button>
+                <button 
+                  class:active={$activeTab === 'skills'}
+                  class="tab-btn"
+                  on:click={() => activeTab.set('skills')}
+                >
+                  Навыки
+                </button>
+                <button 
+                  class:active={$activeTab === 'projects'}
+                  class="tab-btn"
+                  on:click={() => activeTab.set('projects')}
+                >
+                  Проекты
+                </button>
+              </nav>
+
+              <!-- Контент табов -->
+              <div class="tab-content">
+                {#if $activeTab === 'info'}
+                  <div class="info-tab">
+                    <div class="info-section">
+                      <h3>👤 О себе</h3>
+                      <p>{$selectedMember.description}</p>
+                    </div>
+                    
+                    <div class="info-grid">
+                      <div class="info-card">
+                        <div class="info-icon"></div>
+                        <div class="info-content">
+                          <div class="info-label">Username</div>
+                          <div class="info-value">@{$selectedMember.username}</div>
+                        </div>
+                      </div>
+                      
+                      <div class="info-card">
+                        <div class="info-icon"></div>
+                        <div class="info-content">
+                          <div class="info-label">В команде с</div>
+                          <div class="info-value">{$selectedMember.joinDate}</div>
+                        </div>
+                      </div>
+                      
+                      <div class="info-card">
+                        <div class="info-icon"></div>
+                        <div class="info-content">
+                          <div class="info-label">Специализация</div>
+                          <div class="info-value">{$selectedMember.specialty}</div>
+                        </div>
+                      </div>
+                      
+                      <div class="info-card">
+                        <div class="info-icon"></div>
+                        <div class="info-content">
+                          <div class="info-label">Девиз</div>
+                          <div class="info-value">"{$selectedMember.motto}"</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                {:else if $activeTab === 'skills'}
+                  <div class="skills-tab">
+                    <h3> Технические навыки</h3>
+                    <div class="skills-grid">
+                      {#each $selectedMember.skills as skill}
+                        <div class="skill-item">
+                          <span class="skill-name">{skill}</span>
+                          <div class="skill-level">
+                            <div 
+                              class="skill-progress"
+                              style="width: {Math.floor(Math.random() * 30) + 70}%"
+                            ></div>
+                          </div>
+                        </div>
+                      {/each}
+                    </div>
+                    
+                    <div class="skills-summary">
+                      <h4>Сильные стороны</h4>
+                      <ul>
+                        <li>Глубокие знания в своей области</li>
+                        <li>Способность быстро обучаться новым технологиям</li>
+                        <li>Внимание к деталям и качеству</li>
+                        <li>Командная работа и коммуникация</li>
+                      </ul>
+                    </div>
+                  </div>
+
+                {:else if $activeTab === 'projects'}
+                  <div class="projects-tab">
+                    <h3>Ключевые проекты</h3>
+                    <div class="projects-list">
+                      {#each $selectedMember.projects as project}
+                        <div class="project-card">
+                          <div class="project-icon"></div>
+                          <div class="project-content">
+                            <h4>{project}</h4>
+                            <p>Активный проект под руководством {$selectedMember.name}</p>
+                            <div class="project-status">
+                              <span class="status-badge active">В разработке</span>
+                              <span class="project-role">Роль: {$selectedMember.role}</span>
+                            </div>
+                          </div>
+                        </div>
+                      {/each}
+                    </div>
+                    
+                    <div class="team-contribution">
+                      <h4>Вклад в команду</h4>
+                      <p>{$selectedMember.name} играет ключевую роль в успехе наших проектов, привнося экспертизу в области {$selectedMember.specialty.toLowerCase()}.</p>
+                    </div>
+                  </div>
+                {/if}
+              </div>
+            </div>
+          </CRTScreen>
+        </div>
+      </Col>
+    </Row>
+</section>
+
+<style>
+  .team-page {
+    min-height: 100vh;
+    padding-top: 50px;
+    background: var(--bg-dark);
+    overflow: hidden;
+  }
+
+  .panel {
+    height: 100%;
+    border: 1px solid var(--terminal-border);
+    background: rgba(10, 10, 10, 0.9);
+  }
+
+  .team-list-terminal, .member-detail-terminal {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .terminal-header {
+    background: var(--primary-green);
+    color: var(--bg-dark);
+    padding: 12px 20px;
+    font-weight: bold;
+    border-bottom: 2px solid var(--bg-dark);
+    font-size: 0.9rem;
+    font-family: 'Courier New', monospace;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+  }
+
+  .member-username {
+    color: var(--secondary-pink);
+    font-weight: normal;
+  }
+
+  .terminal-body {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .team-list-body {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .team-stats {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 15px;
+    margin-bottom: 10px;
+  }
+
+  .stat-item {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    padding: 15px;
+    text-align: center;
+  }
+
+  .stat-number {
+    display: block;
+    color: var(--primary-green);
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  .stat-label {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+  }
+
+  .members-list {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .member-item {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    padding: 15px;
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  .member-item:hover {
+    border-color: var(--primary-green);
+    transform: translateX(5px);
+  }
+
+  .member-item.active {
+    border-color: var(--secondary-pink);
+    background: rgba(255, 0, 170, 0.1);
+  }
+
+  .member-avatar {
+    font-size: 2rem;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 50%;
+  }
+
+  .member-info {
+    flex: 1;
+  }
+
+  .member-name {
+    color: var(--primary-green);
+    font-weight: bold;
+    font-size: 1.1rem;
+    margin-bottom: 2px;
+  }
+
+  .member-username {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    margin-bottom: 5px;
+  }
+
+  .member-role {
+    font-size: 0.8rem;
+    font-weight: bold;
+  }
+
+  .member-selector {
+    width: 20px;
+    text-align: center;
+  }
+
+  .selector-active {
+    color: var(--secondary-pink);
+    font-size: 1.2rem;
+  }
+
+  .selector-inactive {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+  }
+
+  .team-description {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    padding: 15px;
+    margin-top: 10px;
+  }
+
+  .team-description h4 {
+    color: var(--primary-green);
+    margin: 0 0 10px 0;
+    font-size: 1rem;
+  }
+
+  .team-description p {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    line-height: 1.4;
+    margin: 0;
+  }
+
+  /* Детали участника */
+  .member-detail-body {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .member-header {
+    display: flex;
+    gap: 30px;
+    padding: 30px;
+    border-bottom: 1px solid var(--terminal-border);
+    background: rgba(0, 0, 0, 0.2);
+  }
+
+  .avatar-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .main-avatar {
+    font-size: 4rem;
+    width: 100px;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 50%;
+    border: 3px solid var(--primary-green);
+  }
+
+  .role-badge {
+    padding: 5px 10px;
+    border: 2px solid;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: bold;
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .basic-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .member-name {
+    color: var(--primary-green);
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin: 0 0 10px 0;
+  }
+
+  .member-specialty {
+    color: var(--text-secondary);
+    font-size: 1.2rem;
+    margin-bottom: 15px;
+  }
+
+  .member-motto {
+    color: var(--secondary-pink);
+    font-style: italic;
+    font-size: 1rem;
+    border-left: 3px solid var(--secondary-pink);
+    padding-left: 15px;
+  }
+
+  .detail-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--terminal-border);
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  .tab-btn {
+    flex: 1;
+    padding: 15px 20px;
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border-bottom: 3px solid transparent;
+  }
+
+  .tab-btn:hover {
+    color: var(--primary-green);
+    background: rgba(51, 255, 0, 0.1);
+  }
+
+  .tab-btn.active {
+    color: var(--primary-green);
+    border-bottom-color: var(--primary-green);
+    background: rgba(51, 255, 0, 0.05);
+  }
+
+  .tab-content {
+    flex: 1;
+    padding: 30px;
+    overflow-y: auto;
+  }
+
+  .info-tab, .skills-tab, .projects-tab {
+    height: 100%;
+  }
+
+  .info-tab h3, .skills-tab h3, .projects-tab h3 {
+    color: var(--primary-green);
+    margin: 0 0 20px 0;
+    font-size: 1.4rem;
+  }
+
+  .info-section {
+    margin-bottom: 30px;
+  }
+
+  .info-section p {
+    color: var(--text-secondary);
+    line-height: 1.6;
+    font-size: 1.1rem;
+  }
+
+  .info-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+  }
+
+  .info-card {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    transition: all 0.3s ease;
+  }
+
+  .info-card:hover {
+    border-color: var(--primary-green);
+    transform: translateY(-2px);
+  }
+
+  .info-icon {
+    font-size: 1.5rem;
+  }
+
+  .info-content {
+    flex: 1;
+  }
+
+  .info-label {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    margin-bottom: 5px;
+  }
+
+  .info-value {
+    color: var(--text-secondary);
+    font-weight: bold;
+  }
+
+  .skills-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-bottom: 30px;
+  }
+
+  .skill-item {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+
+  .skill-name {
+    color: var(--text-secondary);
+    font-weight: bold;
+    min-width: 120px;
+  }
+
+  .skill-level {
+    flex: 1;
+    height: 8px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .skill-progress {
+    height: 100%;
+    background: var(--primary-green);
+    border-radius: 4px;
+    transition: width 0.3s ease;
+  }
+
+  .skills-summary ul {
+    color: var(--text-secondary);
+    padding-left: 20px;
+    line-height: 1.6;
+  }
+
+  .projects-list {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-bottom: 30px;
+  }
+
+  .project-card {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--terminal-border);
+    border-radius: 8px;
+    padding: 20px;
+    display: flex;
+    gap: 15px;
+    transition: all 0.3s ease;
+  }
+
+  .project-card:hover {
+    border-color: var(--primary-green);
+  }
+
+  .project-icon {
+    font-size: 1.5rem;
+  }
+
+  .project-content {
+    flex: 1;
+  }
+
+  .project-content h4 {
+    color: var(--primary-green);
+    margin: 0 0 10px 0;
+  }
+
+  .project-content p {
+    color: var(--text-secondary);
+    margin: 0 0 10px 0;
+    font-size: 0.9rem;
+  }
+
+  .project-status {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+  }
+
+  .status-badge {
+    padding: 3px 8px;
+    border-radius: 4px;
+    font-size: 0.7rem;
+    font-weight: bold;
+  }
+
+  .status-badge.active {
+    background: rgba(51, 255, 0, 0.2);
+    color: var(--primary-green);
+    border: 1px solid var(--primary-green);
+  }
+
+  .project-role {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+  }
+
+  .team-contribution p {
+    color: var(--text-secondary);
+    line-height: 1.6;
+  }
+
+  .member-footer {
+    padding: 20px 30px;
+    border-top: 1px solid var(--terminal-border);
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  .footer-note {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+  }
+
+  .note-icon {
+    font-size: 1.2rem;
+  }
+
+  /* Адаптивность */
+  @media (max-width: 768px) {
+    .team-page {
+      height: auto;
+      min-height: 100vh;
+    }
+
+    .member-header {
+      flex-direction: column;
+      text-align: center;
+      gap: 20px;
+      padding: 20px;
+    }
+
+    .member-name {
+      font-size: 2rem;
+    }
+
+    .detail-tabs {
+      flex-direction: column;
+    }
+
+    .info-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .tab-content {
+      padding: 20px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/(main)/team/+server.js b/src/routes/(main)/team/+server.js
new file mode 100644
index 0000000..0505082
--- /dev/null
+++ b/src/routes/(main)/team/+server.js
@@ -0,0 +1,76 @@
+import { json } from '@sveltejs/kit';
+
+const mockTeam = [
+  {
+    id: 1,
+    name: 'Иван Иванов',
+    position: 'Senior Frontend Developer',
+    avatar: '/images/team/ivanov.jpg',
+    bio: 'Опытный разработчик с 5+ годами опыта. Специализируется на Svelte и React.',
+    skills: ['Svelte', 'React', 'TypeScript', 'Node.js'],
+    social: {
+      github: 'ivanov',
+      twitter: 'ivanov_dev',
+      linkedin: 'ivanov'
+    },
+    joined: '2022-01-15'
+  },
+  {
+    id: 2,
+    name: 'Петр Петров',
+    position: 'Fullstack Developer',
+    avatar: '/images/team/petrov.jpg',
+    bio: 'Fullstack разработчик с опытом работы над высоконагруженными системами.',
+    skills: ['Python', 'Django', 'Vue.js', 'PostgreSQL'],
+    social: {
+      github: 'petrov',
+      twitter: 'petrov_dev',
+      linkedin: 'petrov'
+    },
+    joined: '2022-03-10'
+  },
+  {
+    id: 3,
+    name: 'Мария Сидорова',
+    position: 'UI/UX Designer',
+    avatar: '/images/team/sidorova.jpg',
+    bio: 'Создаю интерфейсы, которые нравятся пользователям и решают бизнес-задачи.',
+    skills: ['Figma', 'Adobe XD', 'Photoshop', 'Illustrator'],
+    social: {
+      github: 'sidorova',
+      twitter: 'sidorova_design',
+      linkedin: 'sidorova'
+    },
+    joined: '2022-05-20'
+  },
+  {
+    id: 4,
+    name: 'Алексей Смирнов',
+    position: 'DevOps Engineer',
+    avatar: '/images/team/smirnov.jpg',
+    bio: 'Автоматизирую процессы разработки и deployment.',
+    skills: ['Docker', 'Kubernetes', 'AWS', 'CI/CD'],
+    social: {
+      github: 'smirnov',
+      twitter: 'smirnov_ops',
+      linkedin: 'smirnov'
+    },
+    joined: '2022-08-05'
+  }
+];
+
+export async function GET({ url }) {
+  const id = url.searchParams.get('id');
+  
+  if (id) {
+    const member = mockTeam.find(m => m.id === parseInt(id));
+    return member ? json(member) : json({ error: 'Member not found' }, { status: 404 });
+  }
+
+  const limit = parseInt(url.searchParams.get('limit')) || 10;
+  const page = parseInt(url.searchParams.get('page')) || 1;
+  
+  const paginatedTeam = mockTeam.slice((page - 1) * limit, page * limit);
+  
+  return json(paginatedTeam);
+}
\ No newline at end of file
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..a53df3f
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,23 @@
+<script>
+  import { Button } from '@sveltestrap/sveltestrap';
+  import { page } from '$app/stores';
+</script>
+
+<div class="container text-center mt-5">
+  <div class="row">
+    <div class="col-lg-6 mx-auto">
+      <i class="bi bi-exclamation-triangle display-1 text-warning"></i>
+      <h1 class="display-4">{$page.status}</h1>
+      <p class="lead">{$page.error?.message || 'Что-то пошло не так'}</p>
+      
+      <div class="mt-4">
+        <Button color="primary" href="/" class="me-3">
+          <i class="bi bi-house"></i> На главную
+        </Button>
+        <Button color="secondary" on:click={() => location.reload()}>
+          <i class="bi bi-arrow-clockwise"></i> Обновить
+        </Button>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..376d661
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,18 @@
+<script>
+  import Footer from '$lib/components/Footer.svelte';
+  import Navigation from '$lib/components/Navigation.svelte';
+  import '../app.css';
+</script>
+
+  <Navigation />
+  
+  <main>
+    <slot />
+  </main>
+  
+  <Footer/>
+<style>
+  main {
+    min-height: 60vh;
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
new file mode 100644
index 0000000..9138981
--- /dev/null
+++ b/src/routes/admin/+page.svelte
@@ -0,0 +1,27 @@
+import api from '$lib/utils/api';
+
+export const teamService = {
+  getTeamMembers: async (params = {}) => {
+    try {
+      const queryParams = new URLSearchParams();
+      
+      if (params.limit) queryParams.append('limit', params.limit);
+      if (params.page) queryParams.append('page', params.page);
+      
+      const url = `/team?${queryParams.toString()}`;
+      return await api.get(url);
+    } catch (error) {
+      console.error('Error fetching team:', error);
+      return [];
+    }
+  },
+
+  getTeamMember: async (id) => {
+    try {
+      return await api.get(`/team?id=${id}`);
+    } catch (error) {
+      console.error('Error fetching team member:', error);
+      throw error;
+    }
+  }
+};
\ No newline at end of file
diff --git a/src/routes/api/posts/+server.js b/src/routes/api/posts/+server.js
new file mode 100644
index 0000000..3684067
--- /dev/null
+++ b/src/routes/api/posts/+server.js
@@ -0,0 +1,77 @@
+import { json } from '@sveltejs/kit';
+
+const mockPosts = [
+  {
+    id: 1,
+    slug: 'sveltekit-introduction',
+    title: 'Введение в SvelteKit',
+    content: `# Введение в SvelteKit
+
+SvelteKit - это фреймворк для построения веб-приложений на Svelte.
+
+## Основные преимущества
+
+- **Производительность** - нет рантайма
+- **SEO-friendly** - SSR из коробки
+- **Простота** - минимальный boilerplate
+
+## Установка
+
+\`\`\`bash
+npm create svelte@latest my-app
+\`\`\`
+`,
+    excerpt: 'Знакомство с фреймворком SvelteKit и его основными возможностями',
+    date: '2024-01-15',
+    author: 'Иван Иванов',
+    tags: ['svelte', 'javascript', 'frontend']
+  },
+  {
+    id: 2,
+    slug: 'bootstrap-svelte',
+    title: 'Bootstrap в Svelte проектах',
+    content: `# Использование Bootstrap с Svelte
+
+Bootstrap отлично работает с Svelte через sveltestrap.
+
+## Установка
+
+\`\`\`bash
+npm install @sveltestrap/sveltestrap
+\`\`\`
+
+## Использование
+
+Просто импортируйте нужные компоненты.`,
+    excerpt: 'Как интегрировать Bootstrap в Svelte приложение',
+    date: '2024-01-10',
+    author: 'Петр Петров',
+    tags: ['bootstrap', 'ui', 'frontend']
+  }
+];
+
+export async function GET({ url }) {
+  try {
+    const slug = url.searchParams.get('slug');
+    
+    if (slug) {
+      const post = mockPosts.find(p => p.slug === slug);
+      if (!post) {
+        return json({ error: 'Post not found' }, { status: 404 });
+      }
+      return json(post);
+    }
+
+    const limit = parseInt(url.searchParams.get('limit')) || 10;
+    const page = parseInt(url.searchParams.get('page')) || 1;
+    const offset = (page - 1) * limit;
+    
+    const paginatedPosts = mockPosts.slice(offset, offset + limit);
+    
+    return json(paginatedPosts);
+    
+  } catch (error) {
+    return json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
+
diff --git a/src/routes/api/team/+server.js b/src/routes/api/team/+server.js
new file mode 100644
index 0000000..74f43a7
--- /dev/null
+++ b/src/routes/api/team/+server.js
@@ -0,0 +1,57 @@
+import { json } from '@sveltejs/kit';
+
+const mockTeam = [
+  {
+    id: 1,
+    name: 'Иван Иванов',
+    position: 'Senior Frontend Developer',
+    avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face',
+    bio: 'Опытный разработчик с 5+ годами опыта. Специализируется на Svelte и React.',
+    skills: ['Svelte', 'React', 'TypeScript', 'Node.js'],
+    social: {
+      github: 'ivanov',
+      twitter: 'ivanov_dev',
+      linkedin: 'ivanov'
+    },
+    joined: '2022-01-15'
+  },
+  {
+    id: 2,
+    name: 'Петр Петров',
+    position: 'Fullstack Developer',
+    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face',
+    bio: 'Fullstack разработчик с опытом работы над высоконагруженными системами.',
+    skills: ['Python', 'Django', 'Vue.js', 'PostgreSQL'],
+    social: {
+      github: 'petrov',
+      twitter: 'petrov_dev',
+      linkedin: 'petrov'
+    },
+    joined: '2022-03-10'
+  }
+];
+
+export async function GET({ url }) {
+  try {
+    const id = url.searchParams.get('id');
+    
+    if (id) {
+      const member = mockTeam.find(m => m.id === parseInt(id));
+      if (!member) {
+        return json({ error: 'Member not found' }, { status: 404 });
+      }
+      return json(member);
+    }
+
+    const limit = parseInt(url.searchParams.get('limit')) || 10;
+    const page = parseInt(url.searchParams.get('page')) || 1;
+    const offset = (page - 1) * limit;
+    
+    const paginatedTeam = mockTeam.slice(offset, offset + limit);
+    
+    return json(paginatedTeam);
+    
+  } catch (error) {
+    return json({ error: 'Internal server error' }, { status: 500 });
+  }
+}
\ No newline at end of file
diff --git a/static/favicon.svg b/static/favicon.svg
new file mode 100644
index 0000000..cc5dc66
--- /dev/null
+++ b/static/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
new file mode 100644
index 0000000..a049871
--- /dev/null
+++ b/svelte.config.js
@@ -0,0 +1,14 @@
+import { mdsvex } from 'mdsvex';
+import adapter from '@sveltejs/adapter-auto';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: { // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+	// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+	// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+	adapter: adapter() },
+	preprocess: [mdsvex()],
+	extensions: ['.svelte', '.svx']
+};
+
+export default config;
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..bbf8c7d
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});