From 724d7fbc79c146c9979eda2264ddb4b32dde0995 Mon Sep 17 00:00:00 2001
From: Rem0o <remi.mercier.software@gmail.com>
Date: Sun, 11 Aug 2024 11:53:18 -0400
Subject: [PATCH] GPU doc sections

---
 src/common/icons.ts                           |  8 +-
 src/layouts/footer.tsx                        |  6 +-
 .../demo/linearFanCurveCard.tsx               |  8 +-
 src/reactComponents/demo/mixFanCurveCard.tsx  |  4 +-
 src/reactComponents/docs/control.tsx          |  6 +-
 src/reactComponents/docs/customSensors.tsx    | 10 +--
 src/reactComponents/docs/docSection.tsx       |  4 +-
 src/reactComponents/docs/fanCurves.tsx        | 26 +++---
 src/reactComponents/docs/gpu.tsx              | 86 +++++++++++++++++++
 src/reactComponents/donationModal.tsx         |  6 +-
 src/reactComponents/icon.tsx                  | 56 ++++++++----
 src/reactComponents/niceHeader.tsx            | 22 ++---
 src/reactComponents/spinningLogo.tsx          |  4 +-
 src/reactPages/docs.tsx                       | 22 ++++-
 src/reactPages/index.tsx                      | 32 +++----
 15 files changed, 212 insertions(+), 88 deletions(-)
 create mode 100644 src/reactComponents/docs/gpu.tsx

diff --git a/src/common/icons.ts b/src/common/icons.ts
index 54a26a8..70a7110 100644
--- a/src/common/icons.ts
+++ b/src/common/icons.ts
@@ -1,3 +1,5 @@
+type SvgIcon = string | { path: string; viewbox: string };
+
 const svgPaths = {
   mix: "M22,6.92L20.59,5.5L17.74,8.72C15.68,6.4 12.83,5 9.61,5C6.72,5 4.07,6.16 2,8L3.42,9.42C5.12,7.93 7.27,7 9.61,7C12.35,7 14.7,8.26 16.38,10.24L13.5,13.5L9.5,9.5L2,17L3.5,18.5L9.5,12.5L13.5,16.5L17.55,11.93C18.3,13.28 18.8,14.83 19,16.5H21C20.78,14.18 20.05,12.09 18.96,10.34L22,6.92Z",
   linear:
@@ -39,7 +41,9 @@ const svgPaths = {
   auto: "M19,1L17.74,3.75L15,5L17.74,6.26L19,9L20.25,6.26L23,5L20.25,3.75M9,4L6.5,9.5L1,12L6.5,14.5L9,20L11.5,14.5L17,12L11.5,9.5M19,15L17.74,17.74L15,19L17.74,20.25L19,23L20.25,20.25L23,19L20.25,17.74",
   calibration: "M13,2.03V2.05L13,4.05C17.39,4.59 20.5,8.58 19.96,12.97C19.5,16.61 16.64,19.5 13,19.93V21.93C18.5,21.38 22.5,16.5 21.95,11C21.5,6.25 17.73,2.5 13,2.03M11,2.06C9.05,2.25 7.19,3 5.67,4.26L7.1,5.74C8.22,4.84 9.57,4.26 11,4.06V2.06M4.26,5.67C3,7.19 2.25,9.04 2.05,11H4.05C4.24,9.58 4.8,8.23 5.69,7.1L4.26,5.67M15.5,8.5L10.62,13.38L8.5,11.26L7.44,12.32L10.62,15.5L16.56,9.56L15.5,8.5M2.06,13C2.26,14.96 3.03,16.81 4.27,18.33L5.69,16.9C4.81,15.77 4.24,14.42 4.06,13H2.06M7.1,18.37L5.67,19.74C7.18,21 9.04,21.79 11,22V20C9.58,19.82 8.23,19.25 7.1,18.37Z",
   pairing: "M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z",
-  threeDot: "M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"
+  threeDot: "M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z",
+  nvidia: { path:"M101.3 53.6V37.4c1.6-.1 3.2-.2 4.8-.2 44.4-1.4 73.5 38.2 73.5 38.2S148.2 119 114.5 119c-4.5 0-8.9-.7-13.1-2.1V67.7c17.3 2.1 20.8 9.7 31.1 27l23.1-19.4s-16.9-22.1-45.3-22.1c-3-.1-6 .1-9 .4m0-53.6v24.2l4.8-.3c61.7-2.1 102 50.6 102 50.6s-46.2 56.2-94.3 56.2c-4.2 0-8.3-.4-12.4-1.1v15c3.4.4 6.9.7 10.3.7 44.8 0 77.2-22.9 108.6-49.9 5.2 4.2 26.5 14.3 30.9 18.7-29.8 25-99.3 45.1-138.7 45.1-3.8 0-7.4-.2-11-.6v21.1h170.2V0H101.3zm0 116.9v12.8c-41.4-7.4-52.9-50.5-52.9-50.5s19.9-22 52.9-25.6v14h-.1c-17.3-2.1-30.9 14.1-30.9 14.1s7.7 27.3 31 35.2M27.8 77.4s24.5-36.2 73.6-40V24.2C47 28.6 0 74.6 0 74.6s26.6 77 101.3 84v-14c-54.8-6.8-73.5-67.2-73.5-67.2z", viewbox: "0 0 271.7 179.7"},
+  amd: { path: "M431.35 416.39L15.28 0L1530 0L1530 1515.66L1113.92 1099.32L1113.92 416.39L431.35 416.39ZM430.87 499.83L2.49 928.44L2.49 1528.41L602.04 1528.41L1030.39 1099.81L430.87 1099.81L430.87 499.83Z", viewbox: "0 0 1530 1530"}
 };
 
-export default { svgPaths };
+export { type SvgIcon, svgPaths as icons };
diff --git a/src/layouts/footer.tsx b/src/layouts/footer.tsx
index 251f2e4..c295eaa 100644
--- a/src/layouts/footer.tsx
+++ b/src/layouts/footer.tsx
@@ -1,5 +1,5 @@
 import consts from "../common/consts";
-import icons from "../common/icons";
+import { icons } from "../common/icons";
 import { ExternalLink } from "../reactComponents/links";
 import { SpinningLogo } from "../reactComponents/spinningLogo";
 import { FooterButton } from "../reactComponents/footerButton";
@@ -25,12 +25,12 @@ export const DevInformation = () => {
       </ExternalLink>
       <div className="flex items-center justify-center space-x-3 py-3">
         <FooterButton
-          iconSvgPath={icons.svgPaths.heart}
+          iconSvgPath={icons.heart}
           href={consts.urls.sponsor}
           text="Sponsor"
         />
         <FooterButton
-          iconSvgPath={icons.svgPaths.paypal}
+          iconSvgPath={icons.paypal}
           href={consts.urls.donationUrl}
           viewBox="0 0 16 16"
           text="PayPal"
diff --git a/src/reactComponents/demo/linearFanCurveCard.tsx b/src/reactComponents/demo/linearFanCurveCard.tsx
index ef4a053..cfe8188 100644
--- a/src/reactComponents/demo/linearFanCurveCard.tsx
+++ b/src/reactComponents/demo/linearFanCurveCard.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import icons from "../../common/icons";
+import { icons } from "../../common/icons";
 import Select from "../select";
 import FanCurveCard from "./fanCurveCard";
 import type { TemperatureSource } from "./temperatureSource";
@@ -30,7 +30,7 @@ export default function LinearFanCurveCard({
   }, [linearFanCurve.selectedTemperature]);
 
   return (
-    <FanCurveCard iconPath={icons.svgPaths.linear} fanCurve={fanCurve}>
+    <FanCurveCard iconPath={icons.linear} fanCurve={fanCurve}>
       <Select
         onChange={(e) =>
           setFanCurveConfig({
@@ -119,10 +119,10 @@ function CardNumberInput(
 
   return (
     <div className={twMerge("relative inline-block", className)}>
-      <div className="text-xs text-gray-300 ">{label}</div>
+      <div className="text-xs text-gray-300">{label}</div>
       <div>
         <input
-          className="inline-block w-full border-b-2 border-b-white bg-transparent "
+          className="inline-block w-full border-b-2 border-b-white bg-transparent"
           type="number"
           {...attr}
           onMouseEnter={() => setHoverAndFocus([true, focus])}
diff --git a/src/reactComponents/demo/mixFanCurveCard.tsx b/src/reactComponents/demo/mixFanCurveCard.tsx
index 85e5941..2ce88d1 100644
--- a/src/reactComponents/demo/mixFanCurveCard.tsx
+++ b/src/reactComponents/demo/mixFanCurveCard.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { twMerge } from "tailwind-merge";
-import icons from "../../common/icons";
+import { icons } from "../../common/icons";
 import Select from "../select";
 import {
   createMixFanCurve,
@@ -49,7 +49,7 @@ export default function MixFanCurveCard({
       : selectedFunction.name;
 
   return (
-    <FanCurveCard iconPath={icons.svgPaths.mix} fanCurve={fanCurve}>
+    <FanCurveCard iconPath={icons.mix} fanCurve={fanCurve}>
       <Select
         onChange={(e) =>
           setSelectedFunction(mixFunctions[e.target.selectedIndex])
diff --git a/src/reactComponents/docs/control.tsx b/src/reactComponents/docs/control.tsx
index 6a3af85..8307206 100644
--- a/src/reactComponents/docs/control.tsx
+++ b/src/reactComponents/docs/control.tsx
@@ -1,4 +1,4 @@
-import icons from "../../common/icons";
+import {icons} from "../../common/icons";
 import Border from "../border";
 import { NiceSmallerHeader } from "../niceHeader";
 import type { DocSection } from "./docSection";
@@ -47,7 +47,7 @@ const parameters = (
 
 export const speedPairing: DocSection = {
   key: "Speed sensor pairing",
-  icon: icons.svgPaths.pairing,
+  icon: icons.pairing,
   render: () => {
     return speedPairingText;
   }
@@ -55,7 +55,7 @@ export const speedPairing: DocSection = {
 
 export const calibration: DocSection = {
   key: "Calibration",
-  icon: icons.svgPaths.calibration,
+  icon: icons.calibration,
   render: () => {
     return (
       <div>
diff --git a/src/reactComponents/docs/customSensors.tsx b/src/reactComponents/docs/customSensors.tsx
index 75d8b9c..4a18b22 100644
--- a/src/reactComponents/docs/customSensors.tsx
+++ b/src/reactComponents/docs/customSensors.tsx
@@ -1,12 +1,12 @@
 import type consts from "../../common/consts";
-import icons from "../../common/icons";
+import {icons} from "../../common/icons";
 import Border from "../border";
 import { NiceSmallerHeader } from "../niceHeader";
 import { type DocSection, parameters } from "./docSection";
 
 const timeAverage: DocSection = {
   key: "Time Average",
-  icon: icons.svgPaths.time,
+  icon: icons.time,
   render: () => {
     return (
       <>
@@ -31,7 +31,7 @@ const timeAverage: DocSection = {
 
 const mixSensor: DocSection = {
   key: "Mix Sensor",
-  icon: icons.svgPaths.temperature,
+  icon: icons.temperature,
   render: () => {
     return (
       <>
@@ -58,7 +58,7 @@ const mixSensor: DocSection = {
 
 const fileSensor: DocSection = {
   key: "File",
-  icon: icons.svgPaths.file,
+  icon: icons.file,
   render: () => {
     return (
       <>
@@ -84,7 +84,7 @@ const fileSensor: DocSection = {
 
 const offsetSensor: DocSection = {
   key: "Offset",
-  icon: icons.svgPaths.delta,
+  icon: icons.delta,
   render: () => {
     return (
       <>
diff --git a/src/reactComponents/docs/docSection.tsx b/src/reactComponents/docs/docSection.tsx
index ac9d3f7..9366e2a 100644
--- a/src/reactComponents/docs/docSection.tsx
+++ b/src/reactComponents/docs/docSection.tsx
@@ -1,6 +1,8 @@
+import type { SvgIcon } from "../../common/icons";
+
 export type DocSection = {
   key: string;
-  icon?: string;
+  icon?: SvgIcon;
   render: () => JSX.Element;
 };
 
diff --git a/src/reactComponents/docs/fanCurves.tsx b/src/reactComponents/docs/fanCurves.tsx
index 9c07ceb..8bfcc48 100644
--- a/src/reactComponents/docs/fanCurves.tsx
+++ b/src/reactComponents/docs/fanCurves.tsx
@@ -5,7 +5,7 @@ import {
   createTempSourceRandom,
   type TemperatureSource
 } from "../demo/temperatureSource";
-import icons from "../../common/icons";
+import { icons } from "../../common/icons";
 import { useState } from "react";
 import { useInterval } from "../../common/hooks";
 import LinearFanCurveCard from "../demo/linearFanCurveCard";
@@ -50,16 +50,20 @@ const rpmMode: DocSection = {
   key: "RPM mode",
   render: () => (
     <p>
-      All fan curves can used in RPM mode from their<span className="inline-block align-middle">{SmallIcon(icons.svgPaths.threeDot)}</span> menu. Instead of outputing a specific %, it
-      will output a target RPM value. Only controls with a valid calibration can
-      use fan curves in RPM mode.
+      All fan curves can used in RPM mode from their
+      <span className="inline-block align-middle">
+        {SmallIcon(icons.threeDot)}
+      </span>{" "}
+      menu. Instead of outputing a specific %, it will output a target RPM
+      value. Only controls with a valid calibration can use fan curves in RPM
+      mode.
     </p>
   )
 };
 
 const linear: DocSection = {
   key: "Linear",
-  icon: icons.svgPaths.linear,
+  icon: icons.linear,
   render: () => {
     return (
       <>
@@ -107,7 +111,7 @@ const linear: DocSection = {
 
 const graph: DocSection = {
   key: "Graph",
-  icon: icons.svgPaths.graph,
+  icon: icons.graph,
   render: () => {
     return (
       <>
@@ -178,7 +182,7 @@ const DocDemoMixFanCurveCard = () => {
 
 const flat: DocSection = {
   key: "Flat",
-  icon: icons.svgPaths.flat,
+  icon: icons.flat,
   render: () => {
     return (
       <>
@@ -202,7 +206,7 @@ const flat: DocSection = {
 
 const sync: DocSection = {
   key: "Sync",
-  icon: icons.svgPaths.sync,
+  icon: icons.sync,
   render: () => {
     return (
       <>
@@ -233,7 +237,7 @@ const sync: DocSection = {
 
 const trigger: DocSection = {
   key: "Trigger",
-  icon: icons.svgPaths.trigger,
+  icon: icons.trigger,
   render: () => {
     return (
       <>
@@ -260,7 +264,7 @@ const trigger: DocSection = {
 
 const mix: DocSection = {
   key: "Mix Fan Curve",
-  icon: icons.svgPaths.mix,
+  icon: icons.mix,
   render: () => {
     return (
       <>
@@ -289,7 +293,7 @@ const mix: DocSection = {
 
 const auto: DocSection = {
   key: "Auto",
-  icon: icons.svgPaths.auto,
+  icon: icons.auto,
   render: () => (
     <>
       <p>
diff --git a/src/reactComponents/docs/gpu.tsx b/src/reactComponents/docs/gpu.tsx
new file mode 100644
index 0000000..f3b93cf
--- /dev/null
+++ b/src/reactComponents/docs/gpu.tsx
@@ -0,0 +1,86 @@
+import { icons } from "../../common/icons";
+import type { DocSection } from "./docSection";
+
+export const nvidia: DocSection = {
+  key: "NVIDIA",
+  icon: icons.nvidia,
+  render: () => {
+    return (
+      <>
+        <p>
+          Modern Nvidia GPUs (RTX) have a few limitation when it comes to
+          controlling their fans from a third party application. Most notably:
+        </p>
+        <ul>
+          <li>
+            Minimum %: Their is a 30% minimum value and 0 RPM can't be applied
+            manually.
+          </li>
+          <li>
+            0 RPM minimum temperature: usually around the 45 degree range.
+          </li>
+          <li>
+            0 RPM maximum power draw: Having multiple monitors active may exceed
+            that maximum power draw.
+          </li>
+        </ul>
+        <p>
+          To play arround these limitations, the software will release its
+          control over the GPU when the command hits 0%. If the card supports
+          natively 0 RPM, it will be able to enter 0 RPM mode. However, most
+          cards will have built-in conditions for 0 RPM to trigger.
+        </p>
+        <br />
+        <p>
+          With these caveats in mind, a simple graph for a GPU needs to have its
+          0% point at or below the zero RPM temperature point, then staircase up
+          to 30%. Rest of the graph is up to the user.
+        </p>
+      </>
+    );
+  }
+};
+
+export const amd: DocSection = {
+  key: "AMD",
+  icon: icons.amd,
+  render: () => {
+    return (
+      <>
+        <p>
+          Modern AMD GPUs have access to the Adrenaline software to monitor and
+          control various aspects like monitoring and overclocking. The software
+          uses the same interface (ALDX) to get the temperature data, fan RPM
+          and to control the fan. This comes with a few caveat for the fan to be
+          controlled. Only using the temperatures without controlling the fan do
+          not come with these caveats:
+        </p>
+
+        <ul>
+          <li>
+            Overclocking reset: any fan setting applied from the software will
+            reset the overcloking tuning settings in Adrenaline to their default
+            values.
+          </li>
+          <li>
+            Zero RPM: AMD gpus have a set minimum temperature for Zero RPM to
+            come into effect. The temperature is identified with a dotted line
+            in the Adrenaline Graph. This inherent temperature point must be
+            taken into consideration when creating a fan curve for the GPU.
+          </li>
+          <li>
+            Minimum %: There is a minimum % (0% excluded, see Zero RPM) a card
+            can take as an input command, usually arround to 30%. Below that,
+            the card will refuse the command and will keep the minimum %.
+          </li>
+        </ul>
+
+        <p>
+          With these caveats in mind, a simple graph for a GPU needs to have its
+          0% point at or below the zero RPM temperature point, then staircase up
+          to the minimum %. Rest of the graph is up to the user.
+        </p>
+      </>
+    );
+  }
+};
diff --git a/src/reactComponents/donationModal.tsx b/src/reactComponents/donationModal.tsx
index ea96cc1..a5ab384 100644
--- a/src/reactComponents/donationModal.tsx
+++ b/src/reactComponents/donationModal.tsx
@@ -1,6 +1,6 @@
 import type { JsxElement } from "typescript";
 import consts from "../common/consts";
-import icons from "../common/icons";
+import { icons } from "../common/icons";
 import { FooterButton } from "./footerButton";
 import { BigIcon, Icon } from "./icon";
 import { SpinningLogo } from "./spinningLogo";
@@ -19,12 +19,12 @@ function Donation(exitModal: Function) {
 
       <div className="m-2 flex flex-row space-x-4">
         <FooterButton
-          iconSvgPath={icons.svgPaths.heart}
+          iconSvgPath={icons.heart}
           href={consts.urls.sponsor}
           text="Sponsor"
         />
         <FooterButton
-          iconSvgPath={icons.svgPaths.paypal}
+          iconSvgPath={icons.paypal}
           href={consts.urls.donationUrl}
           viewBox="0 0 16 16"
           text="PayPal"
diff --git a/src/reactComponents/icon.tsx b/src/reactComponents/icon.tsx
index efa276a..8b39539 100644
--- a/src/reactComponents/icon.tsx
+++ b/src/reactComponents/icon.tsx
@@ -1,21 +1,39 @@
-import React from "react";
-
-const BigIcon = (path: string) => (
-  <svg className="h-12 w-12" viewBox="0 0 24 24">
-    <path fill="currentColor" d={path} />
-  </svg>
-);
-
-const Icon = (path: string) => (
-  <svg className="h-8 w-8" viewBox="0 0 24 24">
-    <path fill="currentColor" d={path} />
-  </svg>
-);
-
-const SmallIcon = (path: string) => (
-  <svg className="h-5 w-5" viewBox="0 0 24 24">
-    <path fill="currentColor" d={path} />
-  </svg>
-);
+import { twMerge } from "tailwind-merge";
+import type { SvgIcon } from "../common/icons";
+
+const renderIcon = (icon: SvgIcon, className: string) => {
+  const viewBox = getViewBox(icon);
+  const path = getPath(icon);
+  return (
+    <svg className={className} viewBox={viewBox}>
+      <path fill="currentColor" d={path} />
+    </svg>
+  );
+};
+
+const BigIcon = (icon: SvgIcon, className?: string) =>
+  renderIcon(icon, twMerge("h-12 w-12", className));
+
+const Icon = (icon: SvgIcon, className?: string) =>
+  renderIcon(icon, twMerge("h-8 w-8", className));
+
+const SmallIcon = (icon: SvgIcon, className?: string) =>
+  renderIcon(icon, twMerge("h-5 w-5", className));
+
+const getViewBox = (icon: SvgIcon): string => {
+  if (typeof icon === "string") {
+    return "0 0 24 24";
+  }
+
+  return icon.viewbox;
+};
+
+const getPath = (icon: SvgIcon): string => {
+  if (typeof icon === "string") {
+    return icon;
+  }
+
+  return icon.path;
+};
 
 export { BigIcon, Icon, SmallIcon };
diff --git a/src/reactComponents/niceHeader.tsx b/src/reactComponents/niceHeader.tsx
index b92d935..06f430d 100644
--- a/src/reactComponents/niceHeader.tsx
+++ b/src/reactComponents/niceHeader.tsx
@@ -1,11 +1,10 @@
-const NiceHeader = ({ icon, text }: { icon?: string; text: string }) => {
+import type { SvgIcon } from "../common/icons";
+import { BigIcon, Icon } from "./icon";
+
+const NiceHeader = ({ icon, text }: { icon?: SvgIcon; text: string }) => {
   return (
     <h2 className="mb-2 flex items-center text-left">
-      {icon ? (
-        <svg className="mr-5 h-12 w-12" viewBox="0 0 24 24">
-          <path fill="currentColor" d={icon} />
-        </svg>
-      ) : (
+      {icon ? BigIcon(icon, "mr-5") : (
         <></>
       )}
 
@@ -14,16 +13,13 @@ const NiceHeader = ({ icon, text }: { icon?: string; text: string }) => {
   );
 };
 
-const NiceSmallerHeader = ({ icon, text }: { icon?: string; text: string }) => {
+const NiceSmallerHeader = ({ icon, text }: { icon?: SvgIcon; text: string }) => {
   return (
     <h3 className="mb-2 flex items-center text-left">
-      {icon ? (
-        <svg className="mr-5 h-12 w-12" viewBox="0 0 24 24">
-          <path fill="currentColor" d={icon} />
-        </svg>
-      ) : (
+      {icon ? BigIcon(icon, "mr-5")
+        : 
         <></>
-      )}
+      }
 
       <span className="align-middle text-lg font-medium">{text}</span>
     </h3>
diff --git a/src/reactComponents/spinningLogo.tsx b/src/reactComponents/spinningLogo.tsx
index d38de5d..e3a3c18 100644
--- a/src/reactComponents/spinningLogo.tsx
+++ b/src/reactComponents/spinningLogo.tsx
@@ -1,6 +1,6 @@
 import { twMerge } from "tailwind-merge";
 import { useTimeoutBooleanState } from "../common/hooks";
-import icons from "../common/icons";
+import { icons } from "../common/icons";
 
 interface Props {
   spinInitially?: boolean;
@@ -27,7 +27,7 @@ const SpinningLogo = (props: React.SVGProps<SVGSVGElement> & Props) => {
       )}
       viewBox={viewBox ? viewBox : "0 0 24 24"}
     >
-      <path fill="currentColor" d={icons.svgPaths.fan} />
+      <path fill="currentColor" d={icons.fan} />
     </svg>
   );
 };
diff --git a/src/reactPages/docs.tsx b/src/reactPages/docs.tsx
index c26b752..2eed3b4 100644
--- a/src/reactPages/docs.tsx
+++ b/src/reactPages/docs.tsx
@@ -22,6 +22,7 @@ import { NiceHeader } from "../reactComponents/niceHeader";
 import "./../styles/docs.css";
 import { PageHeader } from "../reactComponents/pageHeader";
 import { calibration, speedPairing } from "../reactComponents/docs/control";
+import { amd, nvidia } from "../reactComponents/docs/gpu";
 
 const c: DocSection = {
   key: "-c --config",
@@ -56,10 +57,9 @@ const m: DocSection = {
   }
 };
 
-const controlSections: DocSection[] = [
-  speedPairing,
-  calibration
-];
+const controlSections: DocSection[] = [speedPairing, calibration];
+
+const gpuSections: DocSection[] = [nvidia, amd];
 
 const fanCurveSections: DocSection[] = [
   rpmMode,
@@ -186,6 +186,17 @@ export const DocsPage = () => {
             )}
           </ul>
 
+          <DocSidebarHeader
+            text="GPU"
+            onClick={() => ScrollToSection(refs, "GPU")}
+          />
+
+          <ul className="mb-5 mr-5">
+            {gpuSections.map((s) =>
+              SideBarDocSection(s, () => ScrollToSection(refs, s.key))
+            )}
+          </ul>
+
           <DocSidebarHeader
             text="Fan Curves"
             onClick={() => ScrollToSection(refs, "Fan Curves")}
@@ -225,6 +236,9 @@ export const DocsPage = () => {
 
           <DocHeader text="Control" refs={refs} />
           {controlSections.map((s) => DocSectionComponent(s, refs))}
+          
+          <DocHeader text="GPU" refs={refs} />
+          {gpuSections.map((s) => DocSectionComponent(s, refs))}
 
           <DocHeader text="Fan Curves" refs={refs} />
           {fanCurveSections.map((s) => DocSectionComponent(s, refs))}
diff --git a/src/reactPages/index.tsx b/src/reactPages/index.tsx
index 8bb5fa6..2d59f4a 100644
--- a/src/reactPages/index.tsx
+++ b/src/reactPages/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { InView } from "react-intersection-observer";
 import consts from "../common/consts";
-import icons from "../common/icons";
+import { icons } from "../common/icons";
 import { NiceHeader } from "../reactComponents/niceHeader";
 import Card from "../reactComponents/card";
 import { Icon } from "../reactComponents/icon";
@@ -72,7 +72,7 @@ const DownloadButton = ({
   return (
     <IconButton
       classList="bg-primary-600 hover:text-accent hover:bg-primary-700 text-white"
-      icon={icons.svgPaths.download}
+      icon={icons.download}
       text={text}
       onClick={onClick}
     />
@@ -84,7 +84,7 @@ const GithubButton = () => {
     <TrackedAnchor href={consts.urls.githubPageUrl}>
       <IconButton
         classList="bg-gray-300 hover:bg-gray-400"
-        icon={icons.svgPaths.github}
+        icon={icons.github}
         text="GitHub Page"
       />
     </TrackedAnchor>
@@ -200,7 +200,7 @@ export const IndexPage = () => {
 
       <section className="mx-5 mt-10">
         <Border>
-          <p className="flex max-w-xl justify-center text-xl italic ">
+          <p className="flex max-w-xl justify-center text-xl italic">
             " No third-party software, at all, as much as they might want to
             tout that they do, do not have this level of control. This is what
             happens when someone that sees a problem, is an enthusiast, and is a
@@ -235,14 +235,14 @@ export const IndexPage = () => {
       <section className="w-full bg-body-200 px-5 py-20">
         <div className="mx-auto grid max-w-xl grid-cols-4 gap-12 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
           {[
-            [icons.svgPaths.bulb, "Flexible by design"],
-            [icons.svgPaths.graph, "7 Fan Curve types"],
-            [icons.svgPaths.save, "Create multiple configurations"],
-            [icons.svgPaths.brush, "UI Themes"],
-            [icons.svgPaths.wrench, "Assisted setup"],
-            [icons.svgPaths.temperature, "Temperature Tray Icons"]
+            [icons.bulb, "Flexible by design"],
+            [icons.graph, "7 Fan Curve types"],
+            [icons.save, "Create multiple configurations"],
+            [icons.brush, "UI Themes"],
+            [icons.wrench, "Assisted setup"],
+            [icons.temperature, "Temperature Tray Icons"]
           ].map(([icon, text, onClick], i) => (
-            <div key={i} className="mx-auto flex items-center ">
+            <div key={i} className="mx-auto flex items-center">
               <Card className="bg-body-700 text-body-100 shadow-lg shadow-body-500 hover:animate-wiggle hover:bg-primary-700 hover:text-accent">
                 <div className="h-18 justify-left flex items-center text-center">
                   <div className="mr-2">{Icon(icon)}</div>
@@ -258,7 +258,7 @@ export const IndexPage = () => {
         <Border className="max-w-sm">
           <NiceHeader
             text="CPU, GPU, and case fans"
-            icon={icons.svgPaths.check}
+            icon={icons.check}
           ></NiceHeader>
           <p>
             Yup, that's covered. Fan Control has extensive support for a variety
@@ -273,7 +273,7 @@ export const IndexPage = () => {
         <Border className="max-w-sm">
           <NiceHeader
             text="Tinkerers rejoice"
-            icon={icons.svgPaths.parameters}
+            icon={icons.parameters}
           ></NiceHeader>
           <p>
             Fan Control has ALL the parameters. Fan calibration, response time,
@@ -286,7 +286,7 @@ export const IndexPage = () => {
         <Border className="max-w-sm">
           <NiceHeader
             text="It's all about the mix"
-            icon={icons.svgPaths.mix}
+            icon={icons.mix}
           ></NiceHeader>
           <p className="">
             THE missing feature that originates this whole project. Mix fan
@@ -312,7 +312,7 @@ export const IndexPage = () => {
         <Border className="max-w-sm">
           <NiceHeader
             text="Expansion through plugins"
-            icon={icons.svgPaths.plugin}
+            icon={icons.plugin}
           ></NiceHeader>
           <p>
             Want to add more sensors and controls from a third party? No
@@ -334,7 +334,7 @@ export const IndexPage = () => {
         <Border className="max-w-sm">
           <NiceHeader
             text="Open source backend"
-            icon={icons.svgPaths.github}
+            icon={icons.github}
           ></NiceHeader>
           <p>
             Fan Control backend is mainly based on{" "}