Add missing frontend platform components and update production deployment

This commit adds all previously untracked files and modifications needed for production deployment: - New marketing components (BenefitsSection, CodeBlock, PluginShowcase, PricingTable) - Platform admin components (EditPlatformEntityModal, PlatformListRow, PlatformListing, PlatformTable) - Updated deployment configuration and scripts - Various frontend API and component improvements 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 19:49:06 -05:00
parent 0d1a3045fb
commit 2b321aef57
34 changed files with 1930 additions and 1291 deletions
--- a/frontend/src/components/marketing/CodeBlock.tsx
+++ b/frontend/src/components/marketing/CodeBlock.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import { Check, Copy } from 'lucide-react';
+
+interface CodeBlockProps {
+    code: string;
+    language?: string;
+    filename?: string;
+}
+
+const CodeBlock: React.FC<CodeBlockProps> = ({ code, language = 'python', filename }) => {
+    const [copied, setCopied] = React.useState(false);
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(code);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+        <div className="rounded-xl overflow-hidden bg-gray-900 border border-gray-800 shadow-2xl">
+            {/* Header */}
+            <div className="flex items-center justify-between px-4 py-2 bg-gray-800/50 border-b border-gray-800">
+                <div className="flex items-center gap-2">
+                    <div className="flex gap-1.5">
+                        <div className="w-3 h-3 rounded-full bg-red-500/20 border border-red-500/50" />
+                        <div className="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500/50" />
+                        <div className="w-3 h-3 rounded-full bg-green-500/20 border border-green-500/50" />
+                    </div>
+                    {filename && (
+                        <span className="ml-2 text-xs font-medium text-gray-400 font-mono">
+                            {filename}
+                        </span>
+                    )}
+                </div>
+                <button
+                    onClick={handleCopy}
+                    className="p-1.5 rounded-lg text-gray-400 hover:text-white hover:bg-gray-700/50 transition-colors"
+                    title="Copy code"
+                >
+                    {copied ? <Check className="w-4 h-4 text-green-400" /> : <Copy className="w-4 h-4" />}
+                </button>
+            </div>
+
+            {/* Code */}
+            <div className="p-4 overflow-x-auto">
+                <pre className="font-mono text-sm leading-relaxed">
+                    <code className={`language-${language}`}>
+                        {code.split('\n').map((line, i) => (
+                            <div key={i} className="table-row">
+                                <span className="table-cell text-right pr-4 select-none text-gray-700 w-8">
+                                    {i + 1}
+                                </span>
+                                <span className="table-cell text-gray-300 whitespace-pre">
+                                    {highlightSyntax(line)}
+                                </span>
+                            </div>
+                        ))}
+                    </code>
+                </pre>
+            </div>
+        </div>
+    );
+};
+
+// Simple syntax highlighting for Python/JSON
+const highlightSyntax = (line: string) => {
+    // Comments
+    if (line.trim().startsWith('#') || line.trim().startsWith('//')) {
+        return <span className="text-gray-500">{line}</span>;
+    }
+
+    // Strings
+    const stringRegex = /(['"])(.*?)\1/g;
+    const parts = line.split(stringRegex);
+
+    if (parts.length > 1) {
+        return (
+            <>
+                {parts.map((part, i) => {
+                    // Every 3rd part is the quote, then content, then quote again
+                    // This is a very naive implementation but works for simple marketing snippets
+                    if (i % 3 === 1) return <span key={i} className="text-green-400">"{part}"</span>; // Content
+                    if (i % 3 === 2) return null; // Closing quote (handled by regex split logic usually, but here we just color content)
+
+                    // Keywords
+                    return <React.Fragment key={i}>{highlightKeywords(part)}</React.Fragment>;
+                })}
+            </>
+        );
+    }
+
+    return highlightKeywords(line);
+};
+
+const highlightKeywords = (text: string) => {
+    const keywords = ['def', 'class', 'return', 'import', 'from', 'if', 'else', 'for', 'in', 'True', 'False', 'None'];
+    const words = text.split(' ');
+
+    return (
+        <>
+            {words.map((word, i) => {
+                const isKeyword = keywords.includes(word.trim());
+                const isFunction = word.includes('(');
+
+                return (
+                    <React.Fragment key={i}>
+                        {isKeyword ? (
+                            <span className="text-purple-400">{word}</span>
+                        ) : isFunction ? (
+                            <span className="text-blue-400">{word}</span>
+                        ) : (
+                            word
+                        )}
+                        {' '}
+                    </React.Fragment>
+                );
+            })}
+        </>
+    );
+};
+
+export default CodeBlock;