Revamp website with new Docusaurus version

src/components/HomepageFeatures/index.tsx

@@ -9,36 +9,65 @@ type FeatureItem = {
 };
 
 const FeatureList: FeatureItem[] = [
-  {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: (
-      <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
-      </>
-    ),
-  },
-  {
-    title: 'Focus on What Matters',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
-    description: (
-      <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
-      </>
-    ),
-  },
-  {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
-    ),
-  },
+    {
+        title: 'Performance Oriented',
+        Svg: require('@site/static/img/bolt-solid.svg').default,
+        description: (
+            <>
+                Plex was designed with performance in mind. Plex supports SQLite or MariaDB out of the box.
+                Plex also uses Redis for punishments instead of traditional YAML / JSON files.
+            </>
+        ),
+    },
+    {
+        title: 'Fully Customizable',
+        Svg: require('@site/static/img/sliders-solid.svg').default,
+        description: (
+            <>
+                Plex is designed to be customizable to fit your server's needs. Almost all messages within the plugin can be easily changed.
+            </>
+        ),
+    },
+    {
+        title: 'Permissions',
+        Svg: require('@site/static/img/dice-solid.svg').default,
+        description: (
+            <>
+                Plex allows you to use integrate with a permission system and "fake op" players. This allows server owners to have much more control over what is and isn't allowed.
+                Any Vault-compatible permission plugin will integrate with Plex and can be used instead of ranks.
+            </>
+        ),
+    },
+    {
+        title: 'Modular',
+        Svg: require('@site/static/img/download-solid.svg').default,
+        description: (
+            <>
+                Plex features a fully modular system. You can add or remove modules based on how your server is configured. If you're using permissions,
+                you likely won't need our command blocker, but you will if you use ranks.
+            </>
+        ),
+    },
+    {
+        title: 'Converters',
+        Svg: require('@site/static/img/forward-fast-solid.svg').default,
+        description: (
+            <>
+                We have written tools to convert your existing data from TotalFreedomMod to Plex. This will make your transition even easier so you won't
+                have to start fresh.
+            </>
+        ),
+    },
+    {
+        title: 'Quality Control',
+        Svg: require('@site/static/img/bug-slash-solid.svg').default,
+        description: (
+            <>
+                Each release is tested to find bugs before you have to encounter them on your server. Plex's codebase was designed for rapid progress and
+                won't unexpectedly break.
+            </>
+        ),
+    },
 ];
 
 function Feature({title, Svg, description}: FeatureItem) {

src/components/HomepageFeatures/styles.module.css

@@ -1,11 +1,11 @@
 .features {
   display: flex;
   align-items: center;
-  padding: 2rem 0;
+  padding: 3rem 0;
   width: 100%;
 }
 
 .featureSvg {
-  height: 200px;
-  width: 200px;
+  height: 115px;
+  width: 115px;
 }

src/css/custom.css

@@ -6,25 +6,25 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #2E86C1;
+  --ifm-color-primary-dark: #2874A6;
+  --ifm-color-primary-darker: #21618C;
+  --ifm-color-primary-darkest: #1B4F72;
+  --ifm-color-primary-light: #3498DB;
+  --ifm-color-primary-lighter: #5DADE2;
+  --ifm-color-primary-lightest: #85C1E9;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #2471A3;
+  --ifm-color-primary-dark: #1F618D;
+  --ifm-color-primary-darker: #1A5276;
+  --ifm-color-primary-darkest: #154360;
+  --ifm-color-primary-light: #2980B9;
+  --ifm-color-primary-lighter: #5499C7;
+  --ifm-color-primary-lightest: #7FB3D5;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

src/pages/index.tsx

@@ -20,7 +20,7 @@ function HomepageHeader() {
           <Link
             className="button button--secondary button--lg"
             to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
+            Let's get started
           </Link>
         </div>
       </div>
@@ -32,8 +32,8 @@ export default function Home(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      title={`Home`}
+      description="The official website and documentation for Plex">
       <HomepageHeader />
       <main>
         <HomepageFeatures />