chore: Add guides and comparison pages to landing site

2025-12-20 11:05:45 +01:00
parent 996852a506
commit 4156cd436d
38 changed files with 7037 additions and 132 deletions
@@ -0,0 +1,82 @@
+import React, {ReactNode} from 'react';
+import {AlertTriangle, CheckCircle2, Info, Lightbulb} from 'lucide-react';
+
+type InfoBoxType = 'info' | 'warning' | 'tip' | 'success';
+
+interface InfoBoxProps {
+  type?: InfoBoxType;
+  title?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+const infoBoxConfig: Record<
+  InfoBoxType,
+  {
+    icon: React.ComponentType<{className?: string}>;
+    borderColor: string;
+    bgColor: string;
+    iconColor: string;
+    titleColor: string;
+  }
+> = {
+  info: {
+    icon: Info,
+    borderColor: 'border-blue-200',
+    bgColor: 'bg-blue-50',
+    iconColor: 'text-blue-600',
+    titleColor: 'text-blue-900',
+  },
+  warning: {
+    icon: AlertTriangle,
+    borderColor: 'border-amber-200',
+    bgColor: 'bg-amber-50',
+    iconColor: 'text-amber-600',
+    titleColor: 'text-amber-900',
+  },
+  tip: {
+    icon: Lightbulb,
+    borderColor: 'border-purple-200',
+    bgColor: 'bg-purple-50',
+    iconColor: 'text-purple-600',
+    titleColor: 'text-purple-900',
+  },
+  success: {
+    icon: CheckCircle2,
+    borderColor: 'border-green-200',
+    bgColor: 'bg-green-50',
+    iconColor: 'text-green-600',
+    titleColor: 'text-green-900',
+  },
+};
+
+/**
+ * InfoBox component for displaying tips, warnings, notes, and other callouts in guides
+ */
+export function InfoBox({type = 'info', title, children, className}: InfoBoxProps) {
+  const config = infoBoxConfig[type];
+  const Icon = config.icon;
+
+  const defaultTitles: Record<InfoBoxType, string> = {
+    info: 'Note',
+    warning: 'Warning',
+    tip: 'Tip',
+    success: 'Success',
+  };
+
+  return (
+    <div className={`rounded-xl border ${config.borderColor} ${config.bgColor} p-6 my-6 ${className || ''}`}>
+      <div className={'flex gap-4'}>
+        <div className={'shrink-0'}>
+          <Icon className={`h-5 w-5 ${config.iconColor}`} />
+        </div>
+        <div>
+          {(title || defaultTitles[type]) && (
+            <h4 className={`not-prose font-semibold ${config.titleColor}`}>{title || defaultTitles[type]}</h4>
+          )}
+          <div className={'text-sm text-neutral-700 leading-relaxed mt-0 prose prose-sm max-w-none'}>{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}