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

packages/ui/src/makerkit/marketing/feature-card.tsx

@@ -30,7 +30,7 @@ export const FeatureCard = forwardRef<HTMLDivElement, FeatureCardProps>(
       >
         <CardHeader>
           <CardTitle className="text-xl font-semibold">{label}</CardTitle>
-          <CardDescription className="max-w-xs text-sm font-semibold tracking-tight text-current">
+          <CardDescription className="max-w-xs text-sm font-semibold tracking-tight text-muted-foreground">
             {description}
           </CardDescription>
         </CardHeader>

packages/ui/src/makerkit/marketing/feature-grid.tsx

@@ -10,7 +10,7 @@ export const FeatureGrid = forwardRef<
     <div
       ref={ref}
       className={cn(
-        'grid w-full grid-cols-1 gap-6 space-y-0 lg:grid-cols-3',
+        'grid w-full grid-cols-1 gap-4 space-y-0 lg:grid-cols-3',
         className,
       )}
       {...props}

packages/ui/src/makerkit/marketing/feature-showcase.tsx

@@ -20,7 +20,7 @@ export const FeatureShowcase = forwardRef<HTMLDivElement, FeatureShowcaseProps>(
       >
         <div className="flex w-full max-w-5xl flex-col space-y-4">
           {icon && <div className="flex">{icon}</div>}
-          <h3 className="text-3xl font-normal tracking-tighter xl:text-5xl">
+          <h3 className="text-3xl font-normal tracking-tight xl:text-5xl">
             {heading}
           </h3>
         </div>

packages/ui/src/makerkit/marketing/header.tsx

@@ -24,7 +24,7 @@ export const Header = forwardRef<HTMLDivElement, HeaderProps>(
       >
         <div className="container">
           <div className="grid h-14 grid-cols-3 items-center">
-            <div>{logo}</div>
+            <div className={'mx-auto lg:mx-0'}>{logo}</div>
             <div className="order-first md:order-none">{navigation}</div>
             <div className="flex items-center justify-end space-x-1">
               {actions}

packages/ui/src/makerkit/marketing/hero-title.tsx

@@ -16,7 +16,7 @@ export const HeroTitle = forwardRef<
     <Comp
       ref={ref}
       className={cn(
-        'hero-title flex flex-col space-y-1 text-center font-sans text-4xl font-semibold tracking-tighter dark:text-white sm:text-6xl lg:max-w-5xl lg:text-7xl xl:text-[5.125rem]',
+        'hero-title flex flex-col text-center font-sans text-4xl font-semibold tracking-tighter dark:text-white sm:text-6xl lg:max-w-5xl lg:text-7xl xl:text-[4.85rem]',
         className,
       )}
       {...props}

packages/ui/src/makerkit/marketing/hero.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { cn } from '../../lib/utils';
-import { Heading } from '../../shadcn/heading';
 import { HeroTitle } from './hero-title';
 
 interface HeroProps {
@@ -53,12 +52,11 @@ export function Hero({
 
             {subtitle && (
               <div className="flex max-w-2xl flex-col space-y-1">
-                <Heading
-                  level={3}
-                  className="p-0 text-center font-sans text-base font-normal"
+                <h3
+                  className="p-0 text-center text-xl font-sans font-normal text-muted-foreground tracking-tight"
                 >
                   {subtitle}
-                </Heading>
+                </h3>
               </div>
             )}
           </div>
@@ -78,8 +76,11 @@ export function Hero({
 
       {image && (
         <div
-          className={cn('mx-auto flex max-w-[85rem] justify-center py-8', {
-            ['delay-300 duration-1000 animate-in fade-in zoom-in-95 slide-in-from-top-32 fill-mode-both']:
+          style={{
+            MozAnimationDuration: '100ms',
+          }}
+          className={cn('mx-auto container flex justify-center py-8', {
+            ['delay-1000 duration-1000 animate-in fade-in zoom-in-95 slide-in-from-top-32 fill-mode-both']:
               animate,
           })}
         >

packages/ui/src/makerkit/marketing/pill.tsx

@@ -3,7 +3,6 @@ import { forwardRef } from 'react';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 
 import { cn } from '../../lib/utils';
-import { GradientSecondaryText } from './gradient-secondary-text';
 
 export const Pill = forwardRef<
   HTMLHeadingElement,
@@ -33,7 +32,7 @@ export const Pill = forwardRef<
         </span>
       )}
       <Slottable>
-        <GradientSecondaryText>{props.children}</GradientSecondaryText>
+        <span className={'text-secondary-foreground'}>{props.children}</span>
       </Slottable>
     </Comp>
   );

packages/ui/src/makerkit/marketing/secondary-hero.tsx

@@ -18,7 +18,7 @@ export const SecondaryHero = forwardRef<HTMLDivElement, SecondaryHeroProps>(
       <div
         ref={ref}
         className={cn(
-          'flex flex-col items-center space-y-4 text-center',
+          'flex flex-col items-center space-y-6 text-center',
           className,
         )}
         {...props}
@@ -30,12 +30,11 @@ export const SecondaryHero = forwardRef<HTMLDivElement, SecondaryHeroProps>(
             {heading}
           </Heading>
 
-          <Heading
-            level={3}
-            className="font-sans font-normal tracking-tight text-muted-foreground"
+          <h3
+            className="font-sans font-normal text-xl tracking-tight text-muted-foreground"
           >
             {subheading}
-          </Heading>
+          </h3>
         </div>
 
         {children}

packages/ui/src/makerkit/mode-toggle.tsx

@@ -74,7 +74,7 @@ export function SubMenuModeToggle() {
 
         return (
           <DropdownMenuItem
-            className={cn('flex items-center space-x-2', {
+            className={cn('flex items-center space-x-2 cursor-pointer', {
               'bg-muted': isSelected,
             })}
             key={mode}