feat: Add "How it works" page with color charts and explanations

apps/web/app/(main)/how/page.tsx

@@ -0,0 +1,132 @@
+import FluidColorLogo from '@/components/svg/fluid-color'
+import Image from 'next/image'
+
+import luminaceHueDark from './luminance-vs-hue-dark.webp'
+import luminaceHueLight from './luminance-vs-hue-light.webp'
+import saturationHueDark from './saturation-vs-hue-dark.webp'
+import saturationHueLight from './saturation-vs-hue-light.webp'
+
+function AboutPage() {
+  return (
+    <article className="prose prose-stone mx-auto dark:prose-invert md:prose-lg">
+      <FluidColorLogo className="h-16 w-16 sm:h-20 sm:w-20" />
+      <h2 className="mt-4" id="simple-ui-generator">
+        How it works 🎨
+      </h2>
+      <p>
+        You might notice that the color palettes generated by this tool looks a bit different from other color palette
+        generators. This is because the colors are generated using a taylored algorithm that takes into account the
+        luminosity and saturation of each color. Which is different than the traditional way of generating color
+        palettes, such as adjusting color values by fixed steps.
+      </p>
+      <h2 id="why">Why?</h2>
+      <p>
+        I was looking for a tool that would generate color palettes for me and found this{' '}
+        <a href="https://color.adobe.com/create/color-wheel">color wheel</a> on adobe. It was great but I wanted to be
+        able to save the entire UI as a png file so I could use it as a color template for my UI designs. I also wanted
+        to be able to copy individual colors to clipboard.
+      </p>
+      <p>
+        But I wanted to do it even better. So I set back and studied hard on how &apos;color&apos; reacts with different
+        elements on the web, and how the &apos;hue&apos; plays a role in terms of the hierarchy in relation to the
+        luminosity and saturation. As a result, I have converted what seems like &apos;artistic&apos; choices into
+        robost math that can represent the &apos;true&apos; color value steps.
+      </p>
+      <h2 className="scroll-my-6" id="how-it-works">
+        How it works?
+      </h2>
+      <p>
+        It starts by manually picking main colors in different hues, for example: Red, Orange, Yellow, Lime Green,
+        Green, Teal, Cyan, Light Blue, Blue, Indigo, Purple, Magenta, and Pink. The good news is I am not the judge of
+        what each color looks the best, instead, I converted all TailwindCSS color palettes (HSL) and input their
+        saturation and luminosity values into two seperate charts.
+      </p>
+      <figure>
+        <div className="dark:hidden">
+          <Image alt="Luminosity vs Hue" className="cursor-zoom-in" layout="responsive" src={luminaceHueLight} />
+        </div>
+        <div className="hidden dark:block [&>div]:dark:!bg-black/70">
+          <Image alt="Luminosity vs Hue" className="cursor-zoom-in" layout="responsive" src={luminaceHueDark} />
+        </div>
+        <figcaption>
+          <p>
+            <strong>Luminosity vs Hue</strong>
+          </p>
+          <p>
+            We see that most colors have a linear progression in terms of luminosity, but yellow rises up in the 300-600
+            range, this is becuase that yellow is the brightest color in the spectrum. And it needs more lightness to be
+            visible combined with saturation in those ranges.
+          </p>
+          <p>
+            Colors ranges from cyan to red (180-360) tend to have a higher luminosity than colors in the range of green
+            to blue (0-180). This is because the human eye is more sensitive to yellow-green, which makes sense to
+            increase the lightness of the other colors to match the &apos;feel&apos;.
+          </p>
+        </figcaption>
+      </figure>
+      <p>Next, let&apos;s analyze the saturation vs hue chart.</p>
+      <figure>
+        <div className="dark:hidden">
+          <Image alt="Saturation vs Hue" className="cursor-zoom-in" layout="responsive" src={saturationHueLight} />
+        </div>
+        <div className="hidden dark:block [&>div]:dark:!bg-black/70">
+          <Image alt="Saturation vs Hue" className="cursor-zoom-in" layout="responsive" src={saturationHueDark} />
+        </div>
+        <figcaption>
+          <p>
+            <strong>Saturation vs Hue</strong>
+          </p>
+          <p>
+            We see that yellow and orange oftenly have a higher saturation in the step 400-700 range. And blue, purple,
+            magenta, and green have a lower saturation accross the chart.
+          </p>
+        </figcaption>
+      </figure>
+      <p>
+        As a result, we can then calculate color values using quatric equations, eg. color orange, where `x` is the
+        given hue that is in range of orange hue 22.
+      </p>
+      <pre>y = 0.002x^6 - 0.0695x^5 + 0.8757x^4 - 4.9266x^3 + 12.94x^2 - 17.593x + 91.633</pre>
+      <p>
+        But it doesn&apos;t stop there, because these formulas are might not represent the values of the given hue
+        exactly, we need to make a function that determines the closest two colors that we manually set.
+      </p>
+      <p>
+        Say the user chose a color of hue <strong>18</strong>, we can extract the hue from the color: 18. And in our
+        manual color sets, 18 lies between red (15) and orange (31). So we can use the formula to calculate the ratio
+        between red and orage:
+      </p>
+      <pre>ratio = (18 - 15) / (31 - 15) = 0.3</pre>
+      <p>
+        Then we can use the ratio to calculate the luminosity and saturation of the color using formulas for steps
+        between 50 - 900 (where x is the step count):
+      </p>
+      <pre>
+        saturation_red_step_1 = 0.0076x^6 - 0.2422x^5 + 2.9831x^4 - 17.638x^3 + 52.063x^2 - 77.927x + 132.83 = 92.0765{' '}
+        <br />
+        saturation_orange_step_1 = 0.002x^6 - 0.0695x^5 + 0.8757x^4 - 4.9266x^3 + 12.94x^2 - 17.593x + 91.633 = 82.8616
+      </pre>
+      <p>Then we can calculate the saturation of the color using the ratio:</p>
+      <pre>
+        saturation = saturation_red_step_1 * ratio + saturation_orange_step_1 * (1 - ratio) = 92.0765 * 0.3 + 82.8616 *
+        0.7 = 88.201
+      </pre>
+      <p>
+        Same concept applies to luminosity. Lastly, based on user&apos;s input of the saturation and luminosity, we can
+        convert them as a factor and multiply them with the calculated saturation and luminosity to get the final color
+        steps. For example, if a user chose a color hue 18 with 40% saturation, we can then calculate the computed
+        saturation for value step 50 as:
+      </p>
+      <pre>saturation = 40 * 88.201 / 100 = 35.2804</pre>
+      <h2 id="how-to-contribute">How to contribute?</h2>
+      <p>
+        You can contribute to this project by reporting bugs, suggesting improvements or by forking the repo and sending
+        a pull request.
+      </p>
+      <h2>License</h2>
+      <p>This project is licensed under the MIT License</p>
+    </article>
+  )
+}
+
+export default AboutPage