Merge pull request #144 from NLipatov/feature/18

docs update

Author: NLipatov

docs/TunGo/package-lock.json

@@ -14,18 +14,17 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "3.7.0",
-    "@docusaurus/preset-classic": "3.7.0",
+    "@docusaurus/core": "3.8.1",
+    "@docusaurus/preset-classic": "3.8.1",
     "@mdx-js/react": "^3.1.0",
-    "asciinema-player": "^3.9.0",
     "clsx": "^2.1.1",
     "prism-react-renderer": "^2.4.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.7.0",
-    "@docusaurus/types": "3.7.0"
+    "@docusaurus/module-type-aliases": "3.8.1",
+    "@docusaurus/types": "3.8.1"
   },
   "browserslist": {
     "production": [

docs/TunGo/package.json

@@ -1,6 +1,6 @@
-import clsx from 'clsx';
+import Clsx from 'clsx';
 import Heading from '@theme/Heading';
-import styles from './styles.module.css';
+import Styles from './styles.module.css';
 
 const FeatureList = [
     {
@@ -41,27 +41,40 @@ const FeatureList = [
             </>
         ),
     },
+    {
+        title: 'Supported Platforms',
+        Svg: require('@site/static/svg/monitor.svg').default,
+        description: (
+            <div className={Styles.featureDescriptionList}>
+                <ul>
+                    <li><strong>Linux</strong> (client and server mode)</li>
+                    <li><strong>macOS</strong> (client mode)</li>
+                    <li><strong>Windows</strong> (client mode)</li>
+                </ul>
+            </div>
+        ),
+    },
 ];
 
 function Feature({Svg, title, description}) {
     return (
-        <div className={clsx('col col--3')}>
+        <div className={Clsx('col col--3')}>
             <div className="text--center">
-                <Svg className={styles.featureSvg} role="img" />
+                <Svg className={Styles.featureSvg} role="img"/>
             </div>
             <div className="text--center padding-horiz--md">
-                <Heading as="h3">{title}</Heading>
+            <Heading as="h3">{title}</Heading>
                 <div>{description}</div>
             </div>
         </div>
     );
 }
 
-export default function HomepageFeatures() {
+export default function Features() {
     return (
-        <section className={styles.features}>
+        <section className={Styles.features}>
             <div className="container">
-                <div className="row">
+                <div className="row" style={{justifyContent: "center"}}>
                     {FeatureList.map((props, idx) => (
                         <Feature key={idx} {...props} />
                     ))}

docs/TunGo/src/components/asciinema/player.js

@@ -1,11 +1,20 @@
 .features {
-  display: flex;
-  align-items: center;
+  display: grid;
   padding: 2rem 0;
-  width: 100%;
+  justify-items: center;
 }
 
 .featureSvg {
-  height: 200px;
-  width: 200px;
+  height: 12rem;
+  width: 12rem;
 }
+
+.featureDescriptionList {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+
+.jcCenter {
+  justify-content: center;
+}

docs/TunGo/src/components/features/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
-import styles from './footer.module.css';
+import Styles from './footer.module.css';
 
 export default function Footer() {
     return (
-        <footer className={styles.footer}>
+        <footer className={Styles.footer}>
             <p>
                 Icons by{' '}
                 <Link to="https://openmoji.org/" target="_blank" rel="noopener noreferrer">

docs/TunGo/src/components/features/styles.module.css

@@ -1,26 +1,26 @@
-import clsx from 'clsx';
+import Clsx from 'clsx';
 import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import UseDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-import HomepageFeatures from '@site/src/components/features';
+import Features from '@site/src/components/features';
 import Heading from '@theme/Heading';
-import styles from './index.module.css';
+import Styles from './index.module.css';
 import Footer from "../components/footer/footer";
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const {siteConfig} = UseDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={Clsx('hero hero--primary', Styles.heroBanner)}>
       <div className="container">
         <Heading as="h1" className="hero__title" style={{color: "white"}}>
           {siteConfig.title}
         </Heading>
         <p className="hero__subtitle" style={{color: "white"}}>{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
+        <div className={Styles.buttons}>
           <Link
             className="button button--secondary button--lg"
             to="/docs/QuickStart">
-              Set up your TunGo VPN tunnel in minutes ⏱️
+              Get started in minutes ⏱️
           </Link>
         </div>
       </div>
@@ -30,14 +30,14 @@ function HomepageHeader() {
 
 // noinspection JSUnusedGlobalSymbols
 export default function Home() {
-  const {siteConfig} = useDocusaurusContext();
+  const {siteConfig} = UseDocusaurusContext();
   return (
     <Layout
         title={`${siteConfig.title} — Minimalistic, Fast & Secure Open Source VPN`}
         description={`Secure your connection with ${siteConfig.title}: lightweight, fast, open-source VPN built in Go using modern cryptography.`}>
       <HomepageHeader />
       <main>
-        <HomepageFeatures />
+        <Features />
       </main>
         <Footer/>
     </Layout>