docs: Rewrite Web Support page (#6516)

Not a lot of changes, mostly some stylistic ones, because after
consultations everything was up to date.



https://github.com/user-attachments/assets/aa5dd2bb-2ddd-4cc1-9fae-f77a19691cd1

packages/docs-reanimated/docs/guides/web-support.mdx

@@ -4,45 +4,77 @@ title: Web Support
 sidebar_label: Web Support
 ---
 
-import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
-
-<DocsCompatibilityInfo />
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 
 It's possible to launch Reanimated in a web browser. For that case all of the functionalities are implemented purely in JavaScript, hence the efficiency of the animations might be lower.
 
-Reanimated for Web requires the following configuration steps. You need to add [`@babel/plugin-proposal-export-namespace-from`](https://babeljs.io/docs/en/babel-plugin-proposal-export-namespace-from) as well as Reanimated Babel plugin to your `babel.config.js`.
+### Step 1: Install the package
 
-```bash
-yarn add @babel/plugin-proposal-export-namespace-from
-```
+Install [`@babel/plugin-proposal-export-namespace-from`](https://babeljs.io/docs/babel-plugin-transform-export-namespace-from):
 
-```js {5,6}
-module.exports = {
-  presets: [
-      ...
-  ],
-  plugins: [
-    ...
-    '@babel/plugin-proposal-export-namespace-from',
-    'react-native-reanimated/plugin',
-  ],
-};
+<Tabs groupId="package-managers">
+  <TabItem value="expo" label="EXPO" default>
+
+    npx expo install @babel/plugin-proposal-export-namespace-from
+
+  </TabItem>
+  <TabItem value="npm" label="NPM">
+
+    npm install @babel/plugin-proposal-export-namespace-from
+
+  </TabItem>
+  <TabItem value="yarn" label="YARN">
+
+    yarn add @babel/plugin-proposal-export-namespace-from
+
+  </TabItem>
+</Tabs>
+
+### Step 2: Add plugins to config file
+
+Add `@babel/plugin-proposal-export-namespace-from` and Reanimated Babel plugin to your `babel.config.js`.
+
+```js {7,8}
+  module.exports = {
+      presets: [
+        ... // don't add it here :)
+      ],
+      plugins: [
+          ...
+          '@babel/plugin-proposal-export-namespace-from',
+          'react-native-reanimated/plugin',
+      ],
+  };
 ```
 
+:::caution
+
+Make sure to list `react-native-reanimated/plugin` last.
+
+:::
+
+### Step 3: Launch your app
+
 If you use
-[playground](https://github.com/software-mansion-labs/reanimated-2-playground)
+[playground](https://github.com/software-mansion-labs/reanimated-3-playground)
 app and want to start it in the browser just type:
 
 ```shell
 yarn web
 ```
 
 If you want to start the example applications from the
-[reanimated repository](https://github.com/software-mansion/react-native-reanimated)
-you need to run the following command inside the `Example` directory:
+[reanimated repository](https://github.com/software-mansion/react-native-reanimated) you need to run the following commands inside respository root:
+
+```shell
+yarn && yarn build
+```
+
+Then run inside the `apps/web-example` directory:
 
 ```shell
-yarn start-web
+yarn start
 ```
 
 ## Webpack support
@@ -51,7 +83,7 @@ If you want to use Reanimated in a `webpack` app you should adjust your `webpack
 
 Example webpack config file with Reanimated support:
 
-```js {6,14,15,34}
+```js
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
 
@@ -117,7 +149,11 @@ const dv = useDerivedValue(
 
 Be sure to pass the dependency itself (`sv`) and not `sv.value` to the dependency array.
 
-> Babel users will still need to install the `@babel/plugin-proposal-class-properties` plugin.
+:::caution
+
+Babel users will still need to install the `@babel/plugin-proposal-class-properties` plugin.
+
+:::
 
 ### ESLint Support
 
@@ -136,8 +172,12 @@ When you use hooks from React, they give you nice suggestions from ESLint to inc
 }
 ```
 
+:::info
+
 This assumes you've already installed the `react-hooks` eslint [plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks).
 
+:::
+
 If you're using ESLint autofix, the ESLint plugin may add `.value` to the dependency arrays, rather than the root dependency. In these cases, you should update the array yourself.
 
 ```tsx
@@ -152,7 +192,7 @@ const dv = useDerivedValue(() => sv.value, [sv]);
 
 ## Solito / Next.js Compatibility
 
-There is an experimental SWC plugin in the works. However, given that this may not work properly, you can use the ["Web without a Babel plugin"](#web-without-a-babel-plugin) instructions above.
+There is an experimental SWC plugin in the works. However, given that this may not work properly, you can use the [Web without a Babel plugin](#web-without-a-babel-plugin) instructions above.
 
 ### Next.js Polyfill