Some changes ported from the work on the makerkit.dev website related… (#89)

* Some changes ported from the work on the makerkit.dev website related to the marketing sections of the kit, such as documentation
* Added slight background hue to make darker theme better looking
* Support more complex configurations for documentation navigations.
* Do not fetch content from Keystatic when non-needed
* Add cursor pointers in dropdown
* Updated packages

apps/web/components/app-logo.tsx

@@ -31,10 +31,14 @@ export function AppLogo({
   label,
   className,
 }: {
-  href?: string;
+  href?: string | null;
   className?: string;
   label?: string;
 }) {
+  if (href === null) {
+    return <LogoImage className={className} />;
+  }
+
   return (
     <Link aria-label={label ?? 'Home Page'} href={href ?? '/'}>
       <LogoImage className={className} />

apps/web/components/background-hue.tsx

@@ -0,0 +1,52 @@
+const DEFAULT_COLORS_SCALE = {
+  0: 'hsl(var(--primary))',
+  1: 'hsl(var(--primary))',
+  2: 'hsl(var(--primary))',
+};
+
+export function BackgroundHue({
+  className,
+  opacity = 0.03,
+  colorsScale = DEFAULT_COLORS_SCALE,
+}: {
+  className?: string;
+  opacity?: number;
+  colorsScale?: Record<number, string>;
+}) {
+  const colors = Object.values(colorsScale).map((color, index, array) => {
+    const offset = array.length > 1 ? index / (array.length - 1) : 0;
+    const stopOpacity = 1 - index / (array.length - 1);
+
+    return (
+      <stop
+        offset={offset}
+        key={index}
+        style={{ stopColor: color, stopOpacity }}
+      />
+    );
+  });
+
+  return (
+    <svg
+      className={`pointer-events-none fixed left-0 top-0 !m-0 hidden h-full w-full dark:block ${className}`}
+      style={{ opacity }}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="none"
+    >
+      <defs>
+        <linearGradient
+          id="purpleGradient"
+          x1="10%"
+          y1="70%"
+          x2="50%"
+          y2="20%"
+          gradientUnits="userSpaceOnUse"
+        >
+          {colors}
+        </linearGradient>
+      </defs>
+      <rect width="100" height="100" fill="url(#purpleGradient)" />
+    </svg>
+  );
+}