wip

components/blog/HighlightBox.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface HighlightBoxProps {
+  title?: string;
+  children: React.ReactNode;
+  color?: 'primary' | 'secondary' | 'accent';
+}
+
+const colorStyles = {
+  primary: 'bg-gradient-to-br from-primary/10 to-primary/5 border-primary/30',
+  secondary: 'bg-gradient-to-br from-blue-50 to-blue-100/50 border-blue-200',
+  accent: 'bg-gradient-to-br from-green-50 to-green-100/50 border-green-200',
+};
+
+export default function HighlightBox({ title, children, color = 'primary' }: HighlightBoxProps) {
+  return (
+    <div className={`my-10 p-8 rounded-2xl border-2 ${colorStyles[color]} shadow-sm`}>
+      {title && (
+        <h3 className="text-2xl font-bold text-text-primary mb-4 flex items-center gap-3">
+          <span className="w-1.5 h-8 bg-primary rounded-full"></span>
+          {title}
+        </h3>
+      )}
+      <div className="prose prose-lg max-w-none">
+        {children}
+      </div>
+    </div>
+  );
+}