feat(docs): improve styling and add social thumbnail

docs/docs/installation.md

@@ -22,14 +22,61 @@ npx ralph-starter
 ## Requirements
 
 - **Node.js 18+** - Required for running ralph-starter
-- **Coding Agent** - At least one of:
-  - [Claude Code](https://claude.ai/claude-code) (recommended)
-  - [Cursor](https://cursor.sh/)
-  - [Codex](https://openai.com/codex/)
-  - [OpenCode](https://github.com/opencode-ai/opencode)
+- **Coding Agent** - At least one of the supported agents (see setup below)
 - **Git** - For version control features (`--commit`, `--push`, `--pr`)
 - **GitHub CLI** - For PR creation and GitHub source integration
 
+## Setting Up a Coding Agent
+
+ralph-starter works with several AI coding agents. You need at least one installed:
+
+### Claude Code (Recommended)
+
+The official Anthropic CLI for Claude.
+
+```bash
+# Install via npm
+npm install -g @anthropic-ai/claude-code
+
+# Authenticate
+claude login
+```
+
+Claude Code offers the best integration with ralph-starter's autonomous loops.
+
+### Cursor
+
+AI-powered code editor with built-in agent capabilities.
+
+1. Download from [cursor.sh](https://cursor.sh/)
+2. Install and open Cursor
+3. Sign in with your account
+4. Enable the Cursor CLI: `Cursor → Install 'cursor' command`
+
+### Codex (OpenAI)
+
+OpenAI's coding assistant.
+
+```bash
+# Install the OpenAI CLI
+npm install -g openai
+
+# Set your API key
+export OPENAI_API_KEY=your-key-here
+```
+
+### OpenCode
+
+Open-source alternative with multiple model support.
+
+```bash
+# Install
+npm install -g opencode-ai
+
+# Configure
+opencode setup
+```
+
 ## Verify Installation
 
 ```bash

docs/docusaurus.config.ts

@@ -55,16 +55,7 @@ const config: Config = {
           editUrl: 'https://github.com/rubenmarcus/ralph-starter/tree/main/docs/',
           routeBasePath: 'docs',
         },
-        blog: {
-          showReadingTime: true,
-          feedOptions: {
-            type: ['rss', 'atom'],
-            xslt: true,
-          },
-          editUrl: 'https://github.com/rubenmarcus/ralph-starter/tree/main/docs/',
-          blogTitle: 'ralph-starter Blog',
-          blogDescription: 'Updates and tutorials for ralph-starter',
-        },
+        blog: false, // Disabled for now
         theme: {
           customCss: './src/css/custom.css',
         },
@@ -81,7 +72,7 @@ const config: Config = {
   ],
 
   themeConfig: {
-    image: 'img/ralph-starter-social-card.png',
+    image: 'img/thumbnail.png',
     colorMode: {
       defaultMode: 'dark',
       disableSwitch: true,
@@ -109,7 +100,6 @@ const config: Config = {
           position: 'left',
           label: 'Docs',
         },
-        { to: '/blog', label: 'Blog', position: 'left' },
         {
           href: 'https://github.com/rubenmarcus/ralph-starter',
           label: 'GitHub',
@@ -144,7 +134,6 @@ const config: Config = {
         {
           title: 'More',
           items: [
-            { label: 'Blog', to: '/blog' },
             { label: 'npm', href: 'https://www.npmjs.com/package/ralph-starter' },
           ],
         },
@@ -156,7 +145,7 @@ const config: Config = {
         width: 130,
         height: 29,
       },
-      copyright: `Copyright © ${new Date().getFullYear()} MultiVM Labs. All rights reserved.`,
+      copyright: `vibecoded with love ❤️ by <a href="https://github.com/rubenmarcus" target="_blank" rel="noopener noreferrer">rubenmarcus</a>`,
     },
     prism: {
       theme: prismThemes.dracula,

docs/src/components/FeatureSections/index.tsx

@@ -190,7 +190,7 @@ function FeatureRow({ feature, index }: { feature: Feature; index: number }) {
 
           {feature.link && (
             <Link to={feature.link} className={`${styles.featureLink} ${styles.animateIn} ${styles.delay4}`}>
-              {feature.linkText} →
+              {feature.linkText}
             </Link>
           )}
         </div>

docs/src/components/HeroSection/index.tsx

@@ -107,7 +107,7 @@ export default function HeroSection(): React.ReactElement {
 
         {/* Install command */}
         <div className={`${styles.installCommand} ${styles.animateIn} ${styles.delay5}`}>
-          <code>npm install -g ralph-starter</code>
+          <code>npx ralph-starter</code>
         </div>
       </div>
     </section>

docs/src/components/IntegrationShowcase/index.tsx

@@ -5,28 +5,48 @@ import styles from './styles.module.css';
 
 interface Integration {
   name: string;
-  icon: string;
+  logo: string;
   description: string;
 }
 
 const integrations: Integration[] = [
   {
     name: 'GitHub',
-    icon: '⬡',
+    logo: '/img/github logo.webp',
     description: 'Issues, PRs & repository files',
   },
   {
     name: 'Linear',
-    icon: '◇',
+    logo: '/img/linear.jpeg',
     description: 'Project & issue tracking',
   },
   {
     name: 'Notion',
-    icon: '▣',
+    logo: '/img/notion logo.png',
     description: 'Pages & databases',
   },
 ];
 
+function IntegrationCard({ integration, index }: { integration: Integration; index: number }): React.ReactElement {
+  const logoSrc = useBaseUrl(integration.logo);
+  return (
+    <div
+      className={`${styles.card} ${styles.animateIn}`}
+      style={{ transitionDelay: `${0.2 + index * 0.1}s` }}
+    >
+      <img
+        src={logoSrc}
+        alt={integration.name}
+        className={styles.cardLogo}
+      />
+      <div className={styles.cardInfo}>
+        <h3 className={styles.cardName}>{integration.name}</h3>
+        <p className={styles.cardDescription}>{integration.description}</p>
+      </div>
+    </div>
+  );
+}
+
 export default function IntegrationShowcase(): React.ReactElement {
   const [isVisible, setIsVisible] = useState(false);
   const sectionRef = useRef<HTMLElement>(null);
@@ -63,17 +83,7 @@ export default function IntegrationShowcase(): React.ReactElement {
 
             <div className={styles.grid}>
               {integrations.map((integration, index) => (
-                <div
-                  key={integration.name}
-                  className={`${styles.card} ${styles.animateIn}`}
-                  style={{ transitionDelay: `${0.2 + index * 0.1}s` }}
-                >
-                  <div className={styles.cardIcon}>{integration.icon}</div>
-                  <div className={styles.cardInfo}>
-                    <h3 className={styles.cardName}>{integration.name}</h3>
-                    <p className={styles.cardDescription}>{integration.description}</p>
-                  </div>
-                </div>
+                <IntegrationCard key={integration.name} integration={integration} index={index} />
               ))}
             </div>
 

docs/src/components/IntegrationShowcase/styles.module.css

@@ -144,14 +144,17 @@
     0 0 25px -10px rgba(200, 200, 205, 0.06);
 }
 
-.cardIcon {
-  font-size: 1.5rem;
+.cardLogo {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
   flex-shrink: 0;
-  filter: grayscale(50%);
+  border-radius: 6px;
+  filter: grayscale(30%);
   transition: filter 0.3s ease;
 }
 
-.card:hover .cardIcon {
+.card:hover .cardLogo {
   filter: grayscale(0%);
 }