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/billing/gateway/package.json

@@ -27,13 +27,13 @@
     "@kit/tailwind-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@kit/ui": "workspace:*",
-    "@supabase/supabase-js": "^2.47.1",
+    "@supabase/supabase-js": "^2.47.2",
     "@types/react": "npm:types-react@19.0.0-rc.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.468.0",
     "next": "15.0.4",
     "react": "19.0.0",
-    "react-hook-form": "^7.53.2",
+    "react-hook-form": "^7.54.0",
     "react-i18next": "^15.1.3",
     "zod": "^3.23.8"
   },

packages/billing/gateway/src/components/pricing-table.tsx

@@ -392,32 +392,36 @@ function PlanIntervalSwitcher(
   }>,
 ) {
   return (
-    <div className={'flex'}>
+    <div className={'flex gap-x-1 rounded-full border p-1.5'}>
       {props.intervals.map((plan, index) => {
         const selected = plan === props.interval;
 
         const className = cn(
-          'animate-in fade-in !outline-none transition-all focus:!ring-0',
+          'animate-in fade-in rounded-full !outline-none transition-all focus:!ring-0',
           {
-            'rounded-r-none border-r-transparent': index === 0,
-            'rounded-l-none': index === props.intervals.length - 1,
-            ['hover:text-primary text-muted-foreground border']: !selected,
-            ['hover:text-initial hover:bg-background cursor-default font-semibold']:
-              selected,
+            'border-r-transparent': index === 0,
+            ['hover:text-primary text-muted-foreground']: !selected,
+            ['cursor-default font-semibold']: selected,
+            ['hover:bg-initial']: !selected
           },
         );
 
         return (
           <Button
             key={plan}
-            variant={'outline'}
+            size={'sm'}
+            variant={selected ? 'default' : 'ghost'}
             className={className}
             onClick={() => props.setInterval(plan)}
           >
-            <span className={'flex items-center space-x-1'}>
-              <If condition={selected}>
-                <CheckCircle className={'animate-in fade-in zoom-in-90 h-4'} />
-              </If>
+            <span className={'flex items-center'}>
+              <CheckCircle
+                className={cn('animate-in fade-in zoom-in-95 h-3.5', {
+                  hidden: !selected,
+                  'slide-in-from-left-4': index === 0,
+                  'slide-in-from-right-4': index === props.intervals.length - 1,
+                })}
+              />
 
               <span className={'capitalize'}>
                 <Trans i18nKey={`common:billingInterval.${plan}`} />

packages/billing/lemon-squeezy/package.json

@@ -14,7 +14,7 @@
     "./components": "./src/components/index.ts"
   },
   "dependencies": {
-    "@lemonsqueezy/lemonsqueezy.js": "3.3.1"
+    "@lemonsqueezy/lemonsqueezy.js": "4.0.0"
   },
   "devDependencies": {
     "@kit/billing": "workspace:*",