docs(website): refresh v6 screenshots and drop version badges (#968)

* docs(website): refresh v6 screenshots and drop version badges

* docs: remove DigitalOcean sponsor and update og image

* docs(website): update og image alt text

Author: antonreshetov

.github/assets/DO.svg

@@ -64,10 +64,6 @@ massCode is free and open source. But building and maintaining a quality tool ta
 </p>
 
 <p align="center">
-  <a href="https://m.do.co/c/f2bb3bfab2e6">
-    <img src='.github/assets/DO.svg'>
-  </a>
-  &nbsp;
   <a href="https://mysigmail.com/?ref=github/massCodeIO">
     <img src='.github/assets/MySigMail.svg'>
   </a>

README.md

@@ -1,11 +1,5 @@
 {
   "special": [
-    {
-      "name": "Digital Ocean",
-      "url": "https://m.do.co/c/f2bb3bfab2e6",
-      "img": "https://opensource.nyc3.cdn.digitaloceanspaces.com/attribution/assets/PoweredByDO/DO_Powered_by_Badge_blue.svg",
-      "text": "Sign Up & Get $100 credits"
-    },
     {
       "name": "MySigMail",
       "url": "https://mysigmail.com?ref=masscode.io",

docs/website/.vitepress/components/sponsors/sponsors.json

@@ -47,12 +47,12 @@ function buildSeoHead({
     ['meta', { property: 'og:image', content: ogImage }],
     ['meta', { property: 'og:image:width', content: '1200' }],
     ['meta', { property: 'og:image:height', content: '630' }],
-    ['meta', { property: 'og:image:alt', content: 'massCode code snippets workspace in light and dark themes' }],
+    ['meta', { property: 'og:image:alt', content: 'massCode developer workspace with Notes, Code with the AI assistant, and Drawings' }],
     ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
     ['meta', { name: 'twitter:title', content: pageTitle }],
     ['meta', { name: 'twitter:description', content: pageDescription }],
     ['meta', { name: 'twitter:image', content: ogImage }],
-    ['meta', { name: 'twitter:image:alt', content: 'massCode code snippets workspace in light and dark themes' }],
+    ['meta', { name: 'twitter:image:alt', content: 'massCode developer workspace with Notes, Code with the AI assistant, and Drawings' }],
   ]
 }
 

docs/website/.vitepress/config.mts

@@ -62,6 +62,21 @@ svg {
   max-width: 256px;
 }
 
+/* Скрины сняты без системной тени (screencapture -o), тень рисуем здесь.
+   drop-shadow, а не box-shadow: повторяет прозрачные скруглённые углы окна. */
+.vp-doc img.screenshot {
+  margin: 24px 0;
+  filter:
+    drop-shadow(0 2px 6px rgb(0 0 0 / 0.12))
+    drop-shadow(0 12px 28px rgb(0 0 0 / 0.16));
+}
+
+.dark .vp-doc img.screenshot {
+  filter:
+    drop-shadow(0 0 1px rgb(255 255 255 / 0.18))
+    drop-shadow(0 12px 28px rgb(0 0 0 / 0.5));
+}
+
 .vp-doc [class*="language-"] code {
   padding: 0 24px;
   display: block;

docs/website/.vitepress/theme/styles.css

@@ -84,7 +84,7 @@ For a reproducible evaluation, use the [sample workflow](/compare/#try-a-small-w
 
 The existing [Code documentation](/documentation/code/) illustrates the library layout: folders on the left, a snippet list in the middle, and code in the editor. This is a product screenshot, not a comparative benchmark.
 
-<img :src="withBase('/code.png')" alt="massCode Code space with TypeScript folders, a snippet list, tags, and the selected code in the editor">
+<img class="screenshot" :src="withBase('/code.png')" alt="massCode Code space with TypeScript folders, a snippet list, tags, and the selected code in the editor">
 
 Import behavior matters more than a simple “supports import” checkbox:
 

docs/website/compare/best-code-snippet-managers.md

@@ -5,8 +5,6 @@ description: "Ask the AI assistant to edit code, organize notes, run HTTP workfl
 
 # AI Assistant
 
-<AppVersion text=">=6.0" />
-
 Use your own AI provider or a local model to edit snippets, organize notes and work with HTTP requests. Edits apply directly unless you ask for a preview.
 
 <img :src="withBase('/http-ai.png')" alt="AI assistant reviewing an HTTP product request and suggesting additional response checks">

docs/website/documentation/ai.md

@@ -35,16 +35,12 @@ Right-click the folder and choose **"Default Language"**.
 
 ## Setting a Folder Icon
 
-<AppVersion text=">=3.7" />
-
 Folder icons help large libraries stay easier to scan. Right-click a folder and choose **Set Icon**. Use the **Icons** tab to search the built-in Material and Lucide icon collections.
 
 To restore the default folder icon, right-click the folder and choose **Remove Icon**.
 
 ### Emoji and Uploaded Images
 
-<AppVersion text=">=5.9" />
-
 The icon picker also supports:
 
 - **Emoji** - search the Unicode emoji catalog. Emoji appearance follows your operating system.

docs/website/documentation/code/folders.md

@@ -9,7 +9,7 @@ Code is the snippet library space inside massCode. Use it to keep reusable examp
 
 Access Code from the **Code** icon in the Space rail. The layout has three columns: the [Library](/documentation/code/library) on the left, the snippet list in the middle, and the editor on the right.
 
-<img :src="withBase('/code.png')">
+<img class="screenshot" :src="withBase('/code.png')">
 
 ## When to use Code
 

docs/website/documentation/code/index.md

@@ -67,12 +67,10 @@ Use one of these methods:
 - XML
 - YAML
 
-Use **Editor** > **Normalize Line Breaks** to remove hard terminal wraps from the selection or the whole snippet. <AppVersion text=">=5.9" />
+Use **Editor** > **Normalize Line Breaks** to remove hard terminal wraps from the selection or the whole snippet.
 
 ## Real-time Render HTML & CSS
 
-<AppVersion text=">=2.9" />
-
 Use code preview when you want to test a small HTML/CSS idea directly inside massCode.
 
 - Add a new [snippet](#adding-a-snippet) or select an existing one.
@@ -82,8 +80,6 @@ Use code preview when you want to test a small HTML/CSS idea directly inside mas
 
 ## JSON Visualizer
 
-<AppVersion text=">=4.1" />
-
 Use JSON Visualizer when nested JSON is too dense to read comfortably as raw text. massCode turns the current JSON snippet into a visual graph, so objects, arrays, and relationships are easier to scan.
 
 - Add a new [snippet](#adding-a-snippet) or select an existing one.
@@ -93,7 +89,7 @@ Use JSON Visualizer when nested JSON is too dense to read comfortably as raw tex
 - Click a node to inspect its content.
 - Export the visualization as **PNG** or **SVG** when you want to share it.
 
-<img :src="withBase('/json-visually.png')">
+<img class="screenshot" :src="withBase('/json-visually.png')">
 
 <script setup>
 import { withBase } from 'vitepress'