feat(landing): Add manifesto page with full markdown rendering

- Created /manifesto route rendering MANIFESTO.md content
- Modified left bottom panel to show manifesto excerpt and link
- Added comprehensive markdown styling (headings, code, tables, quotes, lists)
- Used is:global styles for dynamically injected HTML
- Implemented sticky navigation with links to home and GitHub
- Added CTA section at bottom with GitHub star and examples links
- Server-side rendered with no client-side JavaScript

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: erudenko

langingpage/src/components/react/App.tsx

@@ -1,9 +1,11 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { CodeComparison } from './CodeComparison';
 import logoImage from '../../assets/dingo-logo.png';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 interface Example {
   id: number;
@@ -17,6 +19,7 @@ interface Example {
   summary?: string;
   complexity?: string;
   order?: number;
+  reasoning?: string;
 }
 
 interface AppProps {
@@ -57,7 +60,6 @@ function groupExamples(examples: Example[]) {
 
 export default function App({ examples }: AppProps) {
   const [selectedId, setSelectedId] = useState(1);
-  const [readmeContent, setReadmeContent] = useState('');
 
   const groupedExamples = groupExamples(examples);
 
@@ -80,30 +82,6 @@ export default function App({ examples }: AppProps) {
     });
   };
 
-  // Step 1: Define difficulty colors object for full button backgrounds
-  const difficultyColors = {
-    basic: {
-      bg: 'bg-green-50',
-      text: 'text-green-700',
-    },
-    intermediate: {
-      bg: 'bg-amber-50',
-      text: 'text-amber-700',
-    },
-    advanced: {
-      bg: 'bg-red-50',
-      text: 'text-red-700',
-    },
-  };
-
-  // Fetch README.md content
-  useEffect(() => {
-    fetch('https://raw.githubusercontent.com/MadAppGang/dingo/refs/heads/main/README.md')
-      .then(response => response.text())
-      .then(data => setReadmeContent(data))
-      .catch(error => console.error('Error fetching README:', error));
-  }, []);
-
   return (
     <div className="flex h-screen bg-white">
       {/* Sidebar */}
@@ -153,10 +131,6 @@ export default function App({ examples }: AppProps) {
                 >
                   <div className="space-y-1 pl-2">
                       {categoryExamples.map((example) => {
-                        // Step 4: Use difficultyColors object for full button background
-                        const colors = example.complexity
-                          ? difficultyColors[example.complexity as keyof typeof difficultyColors]
-                          : undefined;
                         const isSelected = selectedId === example.id;
 
                         // Build complete class name for Tailwind (dynamic classes don't work)
@@ -199,14 +173,25 @@ export default function App({ examples }: AppProps) {
           })}
         </nav>
 
-        {/* Description section */}
-        <div className="p-6 border-t border-gray-200 bg-gray-50">
-          <h3 className="text-gray-900 mb-2 text-sm">About This Tool</h3>
+        {/* Manifesto excerpt section */}
+        <a
+          href="/manifesto"
+          className="block p-6 border-t border-gray-200 bg-gradient-to-br from-blue-50 to-indigo-50 hover:from-blue-100 hover:to-indigo-100 transition-all cursor-pointer group"
+        >
+          <div className="flex items-start justify-between mb-2">
+            <h3 className="text-gray-900 text-sm font-semibold">The Dingo Manifesto</h3>
+            <span className="text-blue-600 text-xs group-hover:translate-x-1 transition-transform">→</span>
+          </div>
+          <p className="text-gray-700 text-xs leading-relaxed mb-3 italic">
+            "Go Broke Free. Are You Ready?"
+          </p>
           <p className="text-gray-600 text-xs leading-relaxed">
-            Compare code examples side by side to understand best practices and modern patterns. 
-            Each example shows the transformation from older or less optimal code to improved implementations.
+            You love Go. But you've typed <code className="bg-white px-1 py-0.5 rounded text-xs">if err != nil</code> for the 47th time and thought: "There has to be a better way."
           </p>
-        </div>
+          <p className="text-blue-600 text-xs mt-3 font-medium group-hover:underline">
+            Read the full manifesto →
+          </p>
+        </a>
       </div>
 
       {/* Main Content */}
@@ -219,11 +204,11 @@ export default function App({ examples }: AppProps) {
             language={selectedExample.language}
           />
 
-          {/* Description of the change */}
+          {/* Reasoning content for this example */}
           <div className="p-8 bg-white">
             <div className="max-w-4xl mx-auto markdown-content">
-              {readmeContent ? (
-                <ReactMarkdown 
+              {selectedExample.reasoning || selectedExample.description ? (
+                <ReactMarkdown
                   remarkPlugins={[remarkGfm]}
                   components={{
                     h1: ({node, ...props}) => <h1 className="mt-4 mb-2 text-sm" {...props} />,
@@ -234,10 +219,43 @@ export default function App({ examples }: AppProps) {
                     ul: ({node, ...props}) => <ul className="mb-2 ml-4 list-disc text-gray-700 text-xs" {...props} />,
                     ol: ({node, ...props}) => <ol className="mb-2 ml-4 list-decimal text-gray-700 text-xs" {...props} />,
                     li: ({node, ...props}) => <li className="mb-1 text-xs" {...props} />,
-                    code: ({node, inline, ...props}) => 
-                      inline 
-                        ? <code className="bg-gray-100 px-1 py-0.5 rounded text-xs text-gray-800" {...props} />
-                        : <code className="block bg-gray-100 p-2 rounded text-xs overflow-x-auto" {...props} />,
+                    code: ({node, className, children, ...props}: any) => {
+                      const inline = !className;
+                      const match = /language-(\w+)/.exec(className || '');
+                      const language = match ? match[1] : '';
+
+                      if (!inline && language) {
+                        // Block code with language - use syntax highlighter
+                        return (
+                          <SyntaxHighlighter
+                            language={language === 'dingo' ? 'go' : language}
+                            style={vscDarkPlus}
+                            customStyle={{
+                              margin: '0.5rem 0',
+                              padding: '1rem',
+                              borderRadius: '0.375rem',
+                              fontSize: '0.75rem',
+                              lineHeight: '1.5',
+                            }}
+                            showLineNumbers={false}
+                            PreTag="div"
+                          >
+                            {String(children).replace(/\n$/, '')}
+                          </SyntaxHighlighter>
+                        );
+                      }
+
+                      // Inline code or code without language
+                      return inline ? (
+                        <code className="inline-block bg-gray-100 px-1 py-0.5 rounded text-xs text-gray-800" {...props}>
+                          {children}
+                        </code>
+                      ) : (
+                        <code className="bg-gray-100 p-2 rounded text-xs overflow-x-auto block" {...props}>
+                          {children}
+                        </code>
+                      );
+                    },
                     pre: ({node, ...props}) => <pre className="mb-2 bg-gray-100 p-2 rounded overflow-x-auto text-xs" {...props} />,
                     a: ({node, ...props}) => <a className="text-blue-600 hover:underline text-xs" {...props} />,
                     blockquote: ({node, ...props}) => <blockquote className="border-l-4 border-gray-300 pl-3 italic text-gray-600 mb-2 text-xs" {...props} />,
@@ -251,10 +269,10 @@ export default function App({ examples }: AppProps) {
                     td: ({node, ...props}) => <td className="px-2 py-1 text-gray-700 text-xs" {...props} />,
                   }}
                 >
-                  {readmeContent}
+                  {selectedExample.reasoning || selectedExample.description}
                 </ReactMarkdown>
               ) : (
-                <p className="text-gray-500">Loading README...</p>
+                <p className="text-gray-500 text-xs">No reasoning documentation available for this example.</p>
               )}
             </div>
           </div>