Docs homepage redesign

CLAUDE.md

@@ -0,0 +1,126 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Repository Overview
+This is the Optimism Documentation website repository that powers docs.optimism.io - the official technical documentation for the Optimism Collective, covering the OP Stack, Superchain, and interoperability features.
+
+## Tech Stack
+- **Framework**: Next.js 14.2.21 with React 18.2.0
+- **Documentation Engine**: Nextra 2.13.2 (docs theme)
+- **Language**: TypeScript
+- **Package Manager**: pnpm (required - do not use npm or yarn)
+- **Content Format**: MDX (Markdown with React components)
+- **Deployment**: Netlify
+
+## Essential Commands
+
+### Development
+```bash
+pnpm dev          # Start development server at localhost:3001
+pnpm build        # Create production build
+```
+
+### Quality Checks (Run before committing)
+```bash
+pnpm lint         # Run all linting (ESLint + spellcheck + breadcrumbs + redirects + metadata)
+pnpm fix          # Auto-fix all fixable issues (runs on pre-push automatically)
+```
+
+### Individual Linting Commands
+```bash
+pnpm spellcheck:lint     # Check spelling
+pnpm spellcheck:fix      # Add words to dictionary (words.txt)
+pnpm lint:eslint         # Run ESLint
+pnpm lint:breadcrumbs    # Validate breadcrumb structure
+pnpm lint:redirects      # Check redirect configuration
+pnpm lint:metadata       # Validate page metadata
+```
+
+## Architecture & Structure
+
+### Content Organization
+```
+pages/                    # All documentation content (MDX files)
+├── app-developers/      # Application developer guides
+├── operators/           # Node & chain operator documentation
+├── stack/              # OP Stack protocol documentation
+├── superchain/         # Superchain network documentation
+├── interop/           # Interoperability documentation
+└── connect/           # Contributing guides and resources
+```
+
+### Key Directories
+- `components/`: Reusable React components for documentation
+- `public/`: Static assets, images, and tutorial files
+- `utils/`: Utility scripts for linting, validation, and build processes
+- `providers/`: React context providers for global state
+
+## Important Patterns
+
+### MDX Page Structure
+All documentation pages use MDX format with frontmatter metadata:
+```mdx
+---
+title: Page Title
+lang: en-US
+description: Page description for SEO
+---
+
+import { ComponentName } from '@/components/ComponentName'
+
+# Content here...
+```
+
+### Component Imports
+Use the configured path alias for component imports:
+```typescript
+import { ComponentName } from '@/components/ComponentName'
+```
+
+### Adding New Documentation
+1. Create MDX file in appropriate `pages/` subdirectory
+2. Include required frontmatter (title, lang, description)
+3. Run `pnpm lint` to validate metadata and content
+4. Use existing components from `components/` directory when possible
+
+### Spell Checking
+- Custom dictionary maintained in `words.txt`
+- Add technical terms using `pnpm spellcheck:fix`
+- Spell checking runs automatically in the lint pipeline
+
+## Git Workflow
+- **Pre-push hook**: Automatically runs `pnpm fix` via Husky
+- **Auto-commit**: Fixes are automatically committed if changes are made
+- **No pre-commit hooks**: Only validation on push
+
+## Special Features
+- **Kapa.ai Widget**: AI assistant integrated for documentation queries
+- **Algolia Search**: Full-text search across documentation
+- **Feelback**: User feedback collection system
+- **Growth Book**: A/B testing framework for feature experiments
+
+## Common Tasks
+
+### Adding a New Page
+1. Create `.mdx` file in appropriate `pages/` directory
+2. Add frontmatter with title, lang, and description
+3. Write content using Markdown and import React components as needed
+4. Run `pnpm dev` to preview
+5. Run `pnpm lint` before committing
+
+### Updating Components
+- Components are in `components/` directory
+- Follow existing patterns and TypeScript types
+- Test component changes across multiple pages that use them
+
+### Working with Images
+- Place images in `public/img/` directory
+- Reference using `/img/filename.ext` in MDX files
+- Optimize images before adding to repository
+
+## Notes
+- The repository uses automated quality checks - always run `pnpm lint` before pushing
+- Netlify handles deployment automatically on merge to main
+- TypeScript is configured with relaxed strict mode - follow existing patterns
+- MDX allows mixing Markdown with React components - leverage this for interactive content

components/AskAIButton.tsx

@@ -2,7 +2,13 @@ import { RiSparkling2Fill } from '@remixicon/react';
 import { useFeature } from '@growthbook/growthbook-react';
 import { useEffect, useState } from 'react';
 
-const AskAIButton = () => {
+interface AskAIButtonProps {
+  fullWidth?: boolean;
+  large?: boolean;
+  id?: string;
+}
+
+const AskAIButton = ({ fullWidth = false, large = false, id = 'custom-ask-ai-button' }: AskAIButtonProps) => {
   const [mounted, setMounted] = useState(false);
   const enableDocsAIWidget = useFeature('enable_docs_ai_widget').on;
 
@@ -19,10 +25,17 @@ const AskAIButton = () => {
     return null;
   }
 
+  const baseClasses = 'nx-flex nx-gap-2 nx-items-center nx-rounded-lg nx-font-semibold nx-justify-center';
+  const sizeClasses = large 
+    ? 'nx-py-3 nx-px-6 nx-text-base' 
+    : 'nx-py-1.5 nx-px-3 nx-text-sm';
+  const widthClasses = fullWidth ? 'nx-w-full' : '';
+  const iconSize = large ? 16 : 14;
+
   return (
         <button 
-        id='custom-ask-ai-button' 
-        className='nx-flex nx-gap-2 nx-items-center nx-py-1.5 nx-px-3 nx-rounded-lg nx-text-sm nx-font-semibold' 
+        id={id} 
+        className={`${baseClasses} ${sizeClasses} ${widthClasses}`}
         style={{ 
           backgroundColor: '#FF0420', 
           color: 'white', 
@@ -32,7 +45,7 @@ const AskAIButton = () => {
         }}
       >
       <span>Ask AI</span>
-      <RiSparkling2Fill size={14} />
+      <RiSparkling2Fill size={iconSize} />
     </button>
   );
 };

components/LoadingBar/index.tsx

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+const LoadingBar = () => {
+  const [loading, setLoading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const router = useRouter();
+
+  useEffect(() => {
+    let progressTimer: NodeJS.Timeout;
+    let finishTimer: NodeJS.Timeout;
+
+    const handleStart = () => {
+      setLoading(true);
+      setProgress(0);
+
+      progressTimer = setTimeout(() => {
+        setProgress(70);
+      }, 200);
+    };
+
+    const handleComplete = () => {
+      setProgress(100);
+      finishTimer = setTimeout(() => {
+        setLoading(false);
+        setProgress(0);
+      }, 300);
+    };
+
+    router.events.on('routeChangeStart', handleStart);
+    router.events.on('routeChangeComplete', handleComplete);
+    router.events.on('routeChangeError', handleComplete);
+
+    return () => {
+      router.events.off('routeChangeStart', handleStart);
+      router.events.off('routeChangeComplete', handleComplete);
+      router.events.off('routeChangeError', handleComplete);
+      clearTimeout(progressTimer);
+      clearTimeout(finishTimer);
+    };
+  }, [router]);
+
+  if (!loading) return null;
+
+  return (
+    <div className="nx-fixed nx-top-0 nx-left-0 nx-right-0 nx-z-50 nx-h-1 nx-bg-transparent">
+      <div 
+        className="nx-h-full nx-bg-primary-500 nx-transition-all nx-duration-300 nx-ease-out"
+        style={{ width: `${progress}%` }}
+      />
+    </div>
+  );
+};
+
+export default LoadingBar;