diff --git a/.cursor/documentation-reference.md b/.cursor/documentation-reference.md
new file mode 100644
index 00000000..9a119ed9
--- /dev/null
+++ b/.cursor/documentation-reference.md
@@ -0,0 +1,151 @@
+# Documentation Reference - Base Blockchain Development
+
+This document contains the most up-to-date documentation links for all technologies used in this project. Last updated: 2024
+
+## 📚 Core Base Documentation
+
+### Base Chain & Ecosystem
+- **Base Documentation Home**: https://docs.base.org/
+- **Base Full Documentation (LLM Format)**: https://docs.base.org/llms-full.txt
+- **Base Chain Info**: https://docs.base.org/
+
+### Base Account
+- **Base Account Overview**: https://docs.base.org/base-account
+- **Authentication Guide**: https://docs.base.org/base-account/guides/authenticate-users
+- **Sub Accounts Guide**: https://docs.base.org/base-account/improve-ux/sub-accounts
+- **Base Account SDK Reference**: https://docs.base.org/base-account/reference/account-sdk
+- **Spend Permissions**: https://docs.base.org/base-account/improve-ux/spend-permissions
+
+## 🔧 OnchainKit Documentation
+
+### Getting Started
+- **OnchainKit Overview**: https://docs.base.org/builderkits/onchainkit
+- **OnchainKit LLM Format (for AI assistants)**: https://docs.base.org/builderkits/onchainkit/llms.txt
+- **Installation - Next.js**: https://docs.base.org/builderkits/onchainkit/installation/nextjs
+- **Installation - Vite**: https://docs.base.org/builderkits/onchainkit/installation/vite
+- **Installation - Remix**: https://docs.base.org/builderkits/onchainkit/installation/remix
+- **Installation - Astro**: https://docs.base.org/builderkits/onchainkit/installation/astro
+
+### OnchainKit Components
+- **Identity Component**: https://docs.base.org/builderkits/onchainkit/identity/identity
+  - Basenames: https://docs.base.org/builderkits/onchainkit/identity/identity
+  - Avatars: https://docs.base.org/builderkits/onchainkit/identity/avatar
+  - Badges: https://docs.base.org/builderkits/onchainkit/identity/badge
+  - Addresses: https://docs.base.org/builderkits/onchainkit/identity/address
+
+- **Wallet Component**: https://docs.base.org/builderkits/onchainkit/wallet/wallet
+  - Connect Wallet: https://docs.base.org/builderkits/onchainkit/wallet/wallet
+
+- **Transaction Component**: https://docs.base.org/builderkits/onchainkit/transaction/transaction
+
+- **Checkout Component**: https://docs.base.org/builderkits/onchainkit/checkout/checkout
+
+- **Fund Component**: https://docs.base.org/builderkits/onchainkit/fund/fund-button
+
+- **Token Components**: https://docs.base.org/builderkits/onchainkit/token/token-chip
+
+- **Swap Component**: https://docs.base.org/builderkits/onchainkit/swap/swap
+
+- **NFT Mint Card**: https://docs.base.org/builderkits/onchainkit/mint/nft-mint-card
+
+### OnchainKit Guides
+- **Tailwind Integration**: https://docs.base.org/builderkits/onchainkit/guides/tailwind
+- **Theming Guide**: https://docs.base.org/builderkits/onchainkit/guides/themes
+- **Configuration - Supplemental Providers**: https://docs.base.org/builderkits/onchainkit/config/supplemental-providers
+
+## 💰 Coinbase Developer Platform (CDP)
+
+### API & Portal
+- **CDP Portal - Client API Keys**: https://portal.cdp.coinbase.com/projects/api-keys/client-key
+- **CDP Portal Home**: https://portal.cdp.coinbase.com/
+
+### CDP Services
+- **Paymaster/Gas Sponsorship**: https://docs.base.org/docs/tools/paymaster
+- **Smart Accounts**: https://docs.base.org/docs/tools/smart-accounts
+- **Server Wallets**: https://docs.base.org/docs/tools/server-wallets
+
+## 🔗 Third-Party Libraries
+
+### Viem
+- **Viem Documentation**: https://viem.sh/
+- **Viem LLM Format (for AI assistants)**: https://viem.sh/llms-full.txt
+
+### Wagmi
+- **Wagmi Documentation**: https://wagmi.sh/
+
+### Privy
+- **Privy Documentation**: https://docs.privy.io/
+- **Privy React SDK**: https://docs.privy.io/reference/react-auth
+
+### Next.js
+- **Next.js Documentation**: https://nextjs.org/docs
+- **Next.js Deployment**: https://nextjs.org/docs/app/building-your-application/deploying
+
+## 📱 Mini Apps (Base App)
+
+### MiniKit Documentation
+- **MiniKit Overview**: https://docs.base.org/docs/builderkits/minikit
+- **MiniKit SDK**: https://docs.base.org/docs/builderkits/minikit/sdk
+- **MiniKit Templates**: Available in `mini-apps/templates/` directory
+
+### Mini App Development
+- **Base App Integration**: https://docs.base.org/docs/builderkits/minikit
+- **Mini App Validation**: See `mini-apps/mini-app-validation/README.md`
+
+## 🎮 Onchain Gaming
+
+### Game Development Resources
+- **Paymaster for Games**: See `paymaster/hangman-onchain/` and `paymaster/onchain-game-lingos/` for examples
+- **CDP Paymaster**: https://docs.base.org/docs/tools/paymaster
+
+## 📦 Templates & Examples
+
+### OnchainKit Templates
+- **Onchain Commerce**: https://onchain-commerce-template.vercel.app/
+- **NFT Minting**: https://ock-mint.vercel.app/
+- **Funding Flow**: https://github.com/fakepixels/fund-component
+- **Social Profile**: https://github.com/fakepixels/ock-identity
+
+### Quick Start Command
+```bash
+npm create onchain@latest
+```
+
+## 🚀 Deployment
+
+### Vercel
+- **Vercel Platform**: https://vercel.com/new
+- **Next.js Deployment**: https://nextjs.org/docs/app/building-your-application/deploying
+
+## 📝 Additional Resources
+
+### Base Ecosystem
+- **Base Website**: https://base.org/
+- **Base Blog**: https://base.org/blog
+- **Base Discord**: Community support available
+
+### Development Tools
+- **Base Explorer**: https://basescan.org/
+- **Base Sepolia Testnet Explorer**: https://sepolia.basescan.org/
+
+## 🔄 Keeping Documentation Updated
+
+To ensure you have the latest documentation:
+1. Check the official documentation sites listed above regularly
+2. Review release notes and changelogs for breaking changes
+3. Follow Base ecosystem announcements for updates
+4. Check package.json versions against latest releases
+
+## 📋 Quick Reference URLs
+
+### Most Frequently Used
+- Base Docs: https://docs.base.org/
+- OnchainKit LLM Docs: https://docs.base.org/builderkits/onchainkit/llms.txt
+- Base LLM Full Docs: https://docs.base.org/llms-full.txt
+- Viem LLM Docs: https://viem.sh/llms-full.txt
+- CDP Portal: https://portal.cdp.coinbase.com/
+
+---
+
+**Note**: This document should be updated periodically as documentation evolves. Check official sources for the most current information.
+
diff --git a/.cursor/rules/projectrules.mdc b/.cursor/rules/projectrules.mdc
new file mode 100644
index 00000000..d1f863bc
--- /dev/null
+++ b/.cursor/rules/projectrules.mdc
@@ -0,0 +1,53 @@
+# Instructions
+
+You are a multi-agent system coordinator, playing two roles in this environment: Planner and Executor. You will decide the next steps based on the current state in the `.cursor/scratchpad.md` file. Your goal is to complete the user's final requirements.
+
+When the user asks for something to be done, you will take on one of two roles: the Planner or Executor. Any time a new request is made, the human user will ask to invoke one of the two modes. If the human user doesn't specifiy, please ask the human user to clarify which mode to proceed in.
+
+The specific responsibilities and actions for each role are as follows:
+
+## Role Descriptions
+
+1. Planner
+   - Responsibilities: Perform high-level analysis, break down tasks, define success criteria, evaluate current progress. The human user will ask for a feature or change, and your task is to think deeply and document a plan so the human user can review before giving permission to proceed with implementation. When creating task breakdowns, make the tasks as small as possible with clear success criteria. Do not overengineer anything, always focus on the simplest, most efficient approaches.
+   - Actions: Revise the `.cursor/scratchpad.md` file to update the plan accordingly.
+2. Executor
+   - Responsibilities: Execute specific tasks outlined in `.cursor/scratchpad.md`, such as writing code, running tests, handling implementation details, etc.. The key is you need to report progress or raise questions to the human at the right time, e.g. after completion some milestone or after you've hit a blocker. Simply communicate with the human user to get help when you need it.
+   - Actions: When you complete a subtask or need assistance/more information, also make incremental writes or modifications to `.cursor/scratchpad.md `file; update the "Current Status / Progress Tracking" and "Executor's Feedback or Assistance Requests" sections; if you encounter an error or bug and find a solution, document the solution in "Lessons" to avoid running into the error or bug again in the future.
+
+## Document Conventions
+
+- The `.cursor/scratchpad.md` file is divided into several sections as per the above structure. Please do not arbitrarily change the titles to avoid affecting subsequent reading.
+- Sections like "Background and Motivation" and "Key Challenges and Analysis" are generally established by the Planner initially and gradually appended during task progress.
+- "High-level Task Breakdown" is a step-by-step implementation plan for the request. When in Executor mode, only complete one step at a time and do not proceed until the human user verifies it was completed. Each task should include success criteria that you yourself can verify before moving on to the next task.
+- "Project Status Board" and "Executor's Feedback or Assistance Requests" are mainly filled by the Executor, with the Planner reviewing and supplementing as needed.
+- "Project Status Board" serves as a project management area to facilitate project management for both the planner and executor. It follows simple markdown todo format.
+
+## Workflow Guidelines
+
+- After you receive an initial prompt for a new task, update the "Background and Motivation" section, and then invoke the Planner to do the planning.
+- When thinking as a Planner, always record results in sections like "Key Challenges and Analysis" or "High-level Task Breakdown". Also update the "Background and Motivation" section.
+- When you as an Executor receive new instructions, use the existing cursor tools and workflow to execute those tasks. After completion, write back to the "Project Status Board" and "Executor's Feedback or Assistance Requests" sections in the `.cursor/scratchpad.md` file.
+- Adopt Test Driven Development (TDD) as much as possible. Write tests that well specify the behavior of the functionality before writing the actual code. This will help you to understand the requirements better and also help you to write better code.
+- Test each functionality you implement. If you find any bugs, fix them before moving to the next task.
+- When in Executor mode, only complete one task from the "Project Status Board" at a time. Inform the user when you've completed a task and what the milestone is based on the success criteria and successful test results and ask the user to test manually before marking a task complete.
+- Continue the cycle unless the Planner explicitly indicates the entire project is complete or stopped. Communication between Planner and Executor is conducted through writing to or modifying the `.cursor/scratchpad.md` file.
+  "Lesson." If it doesn't, inform the human user and prompt them for help to search the web and find the appropriate documentation or function.
+
+Please note:
+- Note the task completion should only be announced by the Planner, not the Executor. If the Executor thinks the task is done, it should ask the human user planner for confirmation. Then the Planner needs to do some cross-checking.
+- Avoid rewriting the entire document unless necessary;
+- Avoid deleting records left by other roles; you can append new paragraphs or mark old paragraphs as outdated;
+- When new external information is needed, you can inform the human user planner about what you need, but document the purpose and results of such requests;
+- Before executing any large-scale changes or critical functionality, the Executor should first notify the Planner in "Executor's Feedback or Assistance Requests" to ensure everyone understands the consequences.
+- During your interaction with the human user, if you find anything reusable in this project (e.g. version of a library, model name), especially about a fix to a mistake you made or a correction you received, you should take note in the `Lessons` section in the `.cursor/scratchpad.md` file so you will not make the same mistake again.
+- When interacting with the human user, don't give answers or responses to anything you're not 100% confident you fully understand. The human user is non-technical and won't be able to determine if you're taking the wrong approach. If you're not sure about something, just say it.
+
+### User Specified Lessons
+
+- Include info useful for debugging in the program output.
+- Read the file before you try to edit it.
+- If there are vulnerabilities that appear in the terminal, run npm audit before proceeding
+- Always ask before using the -force git command---
+alwaysApply: true
+---
diff --git a/.cursor/scratchpad.md b/.cursor/scratchpad.md
new file mode 100644
index 00000000..56f2e831
--- /dev/null
+++ b/.cursor/scratchpad.md
@@ -0,0 +1,332 @@
+# Hangman Onchain Game - Project Scratchpad
+
+## Background and Motivation
+
+This project is building an onchain Hangman word-guessing game where players can:
+- Play the classic Hangman game across different word categories
+- Earn onchain rewards when they successfully guess words
+- Compete on leaderboards
+- Experience gasless transactions through Coinbase CDP (Coinbase Developer Platform) integration
+
+The game is built using:
+- **Next.js 14+ (App Router)** with TypeScript
+- **TailwindCSS** for styling
+- **Wagmi** for wallet management
+- **Viem** for blockchain interactions
+- **OnchainKit** for onchain-ready UI components
+- **Coinbase CDP** for gasless transactions and account abstraction
+
+The project was bootstrapped using `npm create onchain` which provides a developer-ready scaffold with all the necessary dependencies.
+
+## Key Challenges and Analysis
+
+### Technical Challenges Identified:
+
+1. **Game State Management**: Currently, game state is managed locally within components. A centralized `GameStateProvider` would improve state management across the application.
+
+2. **Onchain Integration**: The game needs to interact with smart contracts for:
+   - Starting games (`startGame` function)
+   - Recording wins (`recordReward` function via CDP account)
+   - Claiming rewards (if applicable)
+
+3. **Leaderboard System**: Need to implement Redis (Upstash) integration for persistent score tracking and leaderboard display.
+
+4. **User Experience Flow**: Need dedicated `/fail` and `/win` pages for better UX when games end, rather than handling everything in the game screen.
+
+5. **Score Calculation**: Currently using a hardcoded score (100). Need a proper scoring system based on:
+   - Number of wrong guesses
+   - Time taken
+   - Hints used
+
+### Current Implementation Status:
+
+✅ **Completed:**
+- Welcome screen (`/`) with wallet connection and game introduction
+- Category selection page (`/category-select`) that loads categories from `wordCategories.json`
+- Game screen (`/game/[category]`) with full game logic:
+  - Word display with masked letters
+  - Letter guessing system (A-Z keyboard)
+  - Wrong guess tracking (max 3 attempts)
+  - Win/loss detection
+  - Hints system (progressive reveal)
+  - Onchain win recording via `/api/win` endpoint
+- `PlayButton` component for starting games with onchain transaction
+- `/api/win` endpoint that records wins onchain using Coinbase CDP
+- CDP integration for gasless transactions
+
+❌ **Missing/Incomplete:**
+- `/fail` page for game over screen
+- `/win` page for dedicated win screen with claim options
+- `GameStateProvider` for centralized state management
+- Leaderboard system (Redis/Upstash integration)
+- `/api/leaderboard` endpoint for score tracking
+- Score calculation system
+- `ScoreBoard` component for displaying leaderboards
+- Proper score tracking (currently hardcoded to 100)
+- Word progression system (next word after win)
+
+## High-level Task Breakdown
+
+### Phase 1: Complete Core Game Flow Pages
+**Goal**: Add missing result pages to complete the basic game flow
+
+#### Task 1.1: Create `/fail` Page
+- **Description**: Create a dedicated page for when players lose the game
+- **Success Criteria**:
+  - Page displays at `/fail` route
+  - Shows "You lost! Try again?" message
+  - Has "Play Again" button that navigates to `/category-select`
+  - Has "Back to Home" button that navigates to `/`
+  - Matches the design style of other pages
+- **Estimated Complexity**: Low
+- **Dependencies**: None
+
+#### Task 1.2: Create `/win` Page
+- **Description**: Create a dedicated page for when players win, with claim reward functionality
+- **Success Criteria**:
+  - Page displays at `/win` route
+  - Shows win message and score
+  - Displays transaction hash if win was recorded onchain
+  - Has "Next Word" button to continue playing
+  - Has "Back to Home" button
+  - Optionally shows claim reward button (if rewards are claimable)
+- **Estimated Complexity**: Medium
+- **Dependencies**: Task 1.1 (for consistency)
+
+#### Task 1.3: Update Game Screen Navigation
+- **Description**: Update the game screen to navigate to `/fail` or `/win` pages instead of showing results inline
+- **Success Criteria**:
+  - On loss, redirects to `/fail` page
+  - On win, redirects to `/win` page with relevant game data
+  - Passes necessary state (score, txHash, etc.) via URL params or state
+- **Estimated Complexity**: Low
+- **Dependencies**: Tasks 1.1 and 1.2
+
+### Phase 2: Game State Management
+**Goal**: Implement centralized state management for better code organization
+
+#### Task 2.1: Create `GameStateProvider`
+- **Description**: Create a React context provider for managing game state globally
+- **Success Criteria**:
+  - Context provides: selected category, current word, attempt count, score, game history
+  - Provider wraps the application in `layout.tsx` or `providers.tsx`
+  - State persists across navigation (or can be reset as needed)
+  - TypeScript types are properly defined
+- **Estimated Complexity**: Medium
+- **Dependencies**: None
+
+#### Task 2.2: Refactor Components to Use GameStateProvider
+- **Description**: Update existing components to use the centralized state
+- **Success Criteria**:
+  - Game screen uses context instead of local state where appropriate
+  - Category selection updates context
+  - State is properly shared between components
+  - No breaking changes to existing functionality
+- **Estimated Complexity**: Medium
+- **Dependencies**: Task 2.1
+
+### Phase 3: Score System and Leaderboard
+**Goal**: Implement proper scoring and leaderboard functionality
+
+#### Task 3.1: Implement Score Calculation System
+- **Description**: Create a scoring algorithm based on game performance
+- **Success Criteria**:
+  - Score calculation considers: wrong guesses (fewer = higher score), hints used (fewer = higher score), time taken (optional)
+  - Score is calculated and stored when game is won
+  - Score is displayed in game UI and win screen
+- **Estimated Complexity**: Medium
+- **Dependencies**: Task 2.1
+
+#### Task 3.2: Set Up Redis/Upstash Integration
+- **Description**: Configure Upstash Redis for leaderboard storage
+- **Success Criteria**:
+  - Redis client is configured in `lib/redis.ts`
+  - Environment variables are documented
+  - Connection is tested and working
+- **Estimated Complexity**: Low
+- **Dependencies**: None
+
+#### Task 3.3: Create `/api/leaderboard` Endpoint
+- **Description**: Create API route for leaderboard operations
+- **Success Criteria**:
+  - POST endpoint accepts `{ address, score }` and stores in Redis
+  - GET endpoint returns top N players sorted by score
+  - Proper error handling and validation
+  - Returns data in format: `{ leaderboard: [{ address, score, rank }] }`
+- **Estimated Complexity**: Medium
+- **Dependencies**: Task 3.2
+
+#### Task 3.4: Create `ScoreBoard` Component
+- **Description**: Create a component to display the leaderboard
+- **Success Criteria**:
+  - Component fetches leaderboard data from API
+  - Displays top players with ranks, addresses, and scores
+  - Updates when new scores are submitted
+  - Shows current player's rank if applicable
+  - Responsive design matching app style
+- **Estimated Complexity**: Medium
+- **Dependencies**: Task 3.3
+
+#### Task 3.5: Integrate Leaderboard into Home Page
+- **Description**: Add leaderboard display to the welcome screen
+- **Success Criteria**:
+  - Leaderboard is displayed on home page
+  - Updates automatically or has refresh button
+  - Doesn't interfere with existing home page layout
+- **Estimated Complexity**: Low
+- **Dependencies**: Task 3.4
+
+#### Task 3.6: Update Win API to Submit Scores
+- **Description**: Modify `/api/win` to also submit score to leaderboard
+- **Success Criteria**:
+  - After recording win onchain, score is submitted to leaderboard
+  - Error handling if leaderboard submission fails (shouldn't block onchain recording)
+  - Score is properly calculated before submission
+- **Estimated Complexity**: Low
+- **Dependencies**: Task 3.1, Task 3.3
+
+### Phase 4: UI/UX Enhancements
+**Goal**: Polish the user experience and add missing features
+
+#### Task 4.1: Improve Game Screen Visual Feedback
+- **Description**: Enhance visual feedback for game state
+- **Success Criteria**:
+  - Better hangman visualization (SVG or ASCII art)
+  - Animations for correct/wrong guesses
+  - Better visual distinction between guessed and unguessed letters
+  - Progress indicators
+- **Estimated Complexity**: Medium
+- **Dependencies**: None
+
+#### Task 4.2: Add Word Progression System
+- **Description**: Allow players to continue to next word in category after winning
+- **Success Criteria**:
+  - After winning, player can choose "Next Word" to continue in same category
+  - Tracks which words have been played to avoid repeats (or allows repeats)
+  - Maintains score across multiple words
+- **Estimated Complexity**: Medium
+- **Dependencies**: Task 2.1
+
+#### Task 4.3: Add Loading States and Error Handling
+- **Description**: Improve loading states and error messages throughout the app
+- **Success Criteria**:
+  - All async operations show loading states
+  - Error messages are user-friendly
+  - Network errors are handled gracefully
+  - Transaction errors provide helpful feedback
+- **Estimated Complexity**: Low
+- **Dependencies**: None
+
+### Phase 5: Testing and Polish
+**Goal**: Ensure everything works correctly and is production-ready
+
+#### Task 5.1: End-to-End Testing
+- **Description**: Test the complete game flow from start to finish
+- **Success Criteria**:
+  - Complete game flow works: Home → Category → Game → Win/Fail → Navigation
+  - Onchain transactions complete successfully
+  - Leaderboard updates correctly
+  - No console errors or warnings
+- **Estimated Complexity**: Low
+- **Dependencies**: All previous phases
+
+#### Task 5.2: Code Review and Refactoring
+- **Description**: Review code for best practices and refactor as needed
+- **Success Criteria**:
+  - Code follows TypeScript best practices
+  - Components are properly organized
+  - No duplicate code
+  - Proper error boundaries
+- **Estimated Complexity**: Medium
+- **Dependencies**: All previous phases
+
+## Project Status Board
+
+### Current Sprint / Active Tasks
+
+- [ ] **Task 1.1**: Create `/fail` Page
+- [ ] **Task 1.2**: Create `/win` Page  
+- [ ] **Task 1.3**: Update Game Screen Navigation
+
+### Backlog / Pending Tasks
+
+- [ ] **Task 2.1**: Create `GameStateProvider`
+- [ ] **Task 2.2**: Refactor Components to Use GameStateProvider
+- [ ] **Task 3.1**: Implement Score Calculation System
+- [ ] **Task 3.2**: Set Up Redis/Upstash Integration
+- [ ] **Task 3.3**: Create `/api/leaderboard` Endpoint
+- [ ] **Task 3.4**: Create `ScoreBoard` Component
+- [ ] **Task 3.5**: Integrate Leaderboard into Home Page
+- [ ] **Task 3.6**: Update Win API to Submit Scores
+- [ ] **Task 4.1**: Improve Game Screen Visual Feedback
+- [ ] **Task 4.2**: Add Word Progression System
+- [ ] **Task 4.3**: Add Loading States and Error Handling
+- [ ] **Task 5.1**: End-to-End Testing
+- [ ] **Task 5.2**: Code Review and Refactoring
+
+### Completed Tasks
+
+- [x] Welcome screen with wallet connection
+- [x] Category selection page
+- [x] Game screen with full game logic
+- [x] Onchain win recording via `/api/win` endpoint
+- [x] `PlayButton` component for starting games
+- [x] CDP integration for gasless transactions
+
+## Current Status / Progress Tracking
+
+### Last Updated: [Current Date]
+
+**Current Phase**: Phase 1 - Complete Core Game Flow Pages
+
+**Recent Progress**:
+- Core game functionality is implemented and working
+- Players can select categories, play games, and have wins recorded onchain
+- Basic game flow is functional but missing dedicated result pages
+
+**Current Blocker**: None
+
+**Next Steps**:
+1. Create `/fail` page for game over scenarios
+2. Create `/win` page for win scenarios with better UX
+3. Update game screen to navigate to these pages instead of showing results inline
+
+## Executor's Feedback or Assistance Requests
+
+*This section will be updated by the Executor as tasks are completed or blockers are encountered.*
+
+**Current Requests**: None
+
+**Completed Milestones**: 
+- Basic game flow is working
+- Onchain integration is functional
+
+## Lessons
+
+### User Specified Lessons
+- Include info useful for debugging in the program output
+- Read the file before you try to edit it
+- If there are vulnerabilities that appear in the terminal, run npm audit before proceeding
+- Always ask before using the -force git command
+
+### Project-Specific Lessons
+- The game uses Coinbase CDP for gasless transactions via the `/api/win` endpoint
+- Game contract address: `0x9a68a6af680e33c59b7e1c34ecc8bbedf6b5b75b` (hardcoded in win route)
+- Word categories are loaded from `/public/wordCategories.json`
+- The game currently uses a hardcoded score of 100 - this needs to be replaced with a proper scoring system
+- CDP environment variables required: `CDP_API_KEY_ID`, `CDP_API_KEY_SECRET`, `CDP_WALLET_SECRET`, `CDP_SIGNER_ADDRESS`, `GAME_CONTRACT_ADDRESS_SEPOLIA`
+
+## Notes and Observations
+
+- The game screen currently handles win/loss states inline, but the plan calls for dedicated `/fail` and `/win` pages for better UX
+- Score calculation is not yet implemented - currently hardcoded to 100
+- Leaderboard system is planned but not yet implemented
+- The `PlayButton` component successfully integrates with smart contracts using wagmi's `useSendCalls` hook
+- CDP integration is working for recording wins onchain without requiring user gas
+
+---
+
+**Document Status**: Active Planning Phase
+**Last Reviewed By**: Planner
+**Next Review**: After Phase 1 completion
+
diff --git a/baselaunch/index.html b/baselaunch/index.html
new file mode 100644
index 00000000..be582d28
--- /dev/null
+++ b/baselaunch/index.html
@@ -0,0 +1,1867 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="Discover and launch mini apps on Base - The premier platform for discovering trending apps, launching your project, and growing your community.">
+  <title>BaseLaunch - Discover & Launch on Base</title>
+  <style>
+    /* ============================================
+       CSS VARIABLES - DESIGN SYSTEM
+       ============================================ */
+    :root {
+      /* Base Colors */
+      --base-blue: #0052FF;
+      --base-blue-hover: #0040CC;
+      --farcaster-purple: #8A63D2;
+      --dark-bg: #0A0A14;
+      --dark-surface: #141420;
+      --dark-card: #1A1A2E;
+      --dark-border: #252539;
+      --text-primary: #FFFFFF;
+      --text-secondary: #B0B0C0;
+      --text-tertiary: #707080;
+      --green: #00D976;
+      --red: #FF3B30;
+      --orange: #FF9500;
+      --gold: #FFD700;
+      
+      /* Spacing */
+      --spacing-xs: 4px;
+      --spacing-sm: 8px;
+      --spacing-md: 16px;
+      --spacing-lg: 24px;
+      --spacing-xl: 32px;
+      --spacing-2xl: 48px;
+      
+      /* Typography */
+      --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-size-xs: 12px;
+      --font-size-sm: 14px;
+      --font-size-base: 16px;
+      --font-size-lg: 18px;
+      --font-size-xl: 24px;
+      --font-size-2xl: 28px;
+      --font-size-3xl: 32px;
+      --font-size-4xl: 40px;
+      
+      /* Easing */
+      --ease: cubic-bezier(0.16, 1, 0.3, 1);
+      
+      /* Transitions */
+      --transition-fast: 150ms var(--ease);
+      --transition-base: 200ms var(--ease);
+      --transition-slow: 300ms var(--ease);
+    }
+    
+    /* ============================================
+       RESET & BASE STYLES
+       ============================================ */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    
+    html {
+      scroll-behavior: smooth;
+    }
+    
+    body {
+      font-family: var(--font-family);
+      font-size: var(--font-size-base);
+      line-height: 1.6;
+      color: var(--text-primary);
+      background-color: var(--dark-bg);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      overflow-x: hidden;
+    }
+    
+    /* ============================================
+       TYPOGRAPHY
+       ============================================ */
+    h1, h2, h3, h4, h5, h6 {
+      font-weight: 700;
+      line-height: 1.2;
+    }
+    
+    h1 { font-size: var(--font-size-4xl); }
+    h2 { font-size: var(--font-size-3xl); }
+    h3 { font-size: var(--font-size-2xl); }
+    h4 { font-size: var(--font-size-xl); }
+    
+    @media (max-width: 767px) {
+      h1 { font-size: var(--font-size-2xl); }
+      h2 { font-size: var(--font-size-xl); }
+      h3 { font-size: var(--font-size-lg); }
+    }
+    
+    /* ============================================
+       UTILITY CLASSES
+       ============================================ */
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    }
+    
+    /* ============================================
+       LAYOUT CONTAINERS
+       ============================================ */
+    .container {
+      width: 100%;
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 0 var(--spacing-md);
+    }
+    
+    @media (min-width: 768px) {
+      .container {
+        padding: 0 var(--spacing-lg);
+      }
+    }
+    
+    /* ============================================
+       TOP NAVIGATION BAR
+       ============================================ */
+    .top-nav {
+      background-color: var(--dark-surface);
+      border-bottom: 1px solid var(--dark-border);
+      padding: var(--spacing-md) 0;
+      position: sticky;
+      top: 0;
+      z-index: 1000;
+      backdrop-filter: blur(10px);
+    }
+    
+    .nav-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 0 var(--spacing-md);
+    }
+    
+    .nav-left {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-lg);
+    }
+    
+    .logo-section {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-sm);
+      text-decoration: none;
+      color: var(--text-primary);
+    }
+    
+    .logo-icon {
+      width: 32px;
+      height: 32px;
+      fill: var(--base-blue);
+    }
+    
+    .logo-text {
+      font-size: var(--font-size-xl);
+      font-weight: 700;
+    }
+    
+    .tagline {
+      font-size: var(--font-size-xs);
+      color: var(--text-tertiary);
+      margin-left: var(--spacing-xs);
+    }
+    
+    .nav-links {
+      display: flex;
+      gap: var(--spacing-md);
+      list-style: none;
+    }
+    
+    .nav-link {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-xs);
+      padding: var(--spacing-sm) var(--spacing-md);
+      color: var(--text-secondary);
+      text-decoration: none;
+      border-radius: 8px;
+      transition: all var(--transition-base);
+      font-size: var(--font-size-sm);
+    }
+    
+    .nav-link:hover {
+      color: var(--text-primary);
+      background-color: var(--dark-card);
+    }
+    
+    .nav-link.active {
+      background-color: var(--base-blue);
+      color: var(--text-primary);
+    }
+    
+    .nav-right {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-md);
+    }
+    
+    .icon-button {
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      background: transparent;
+      color: var(--text-secondary);
+      cursor: pointer;
+      border-radius: 8px;
+      transition: all var(--transition-base);
+    }
+    
+    .icon-button:hover {
+      background-color: var(--dark-card);
+      color: var(--text-primary);
+    }
+    
+    .rank-badge {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-xs);
+      padding: var(--spacing-xs) var(--spacing-md);
+      background-color: var(--farcaster-purple);
+      border-radius: 20px;
+      font-size: var(--font-size-sm);
+      font-weight: 600;
+    }
+    
+    .wallet-address {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-sm);
+      padding: var(--spacing-xs) var(--spacing-md);
+      background-color: var(--dark-card);
+      border-radius: 8px;
+      font-size: var(--font-size-sm);
+      font-family: monospace;
+    }
+    
+    .wallet-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: var(--green);
+    }
+    
+    /* ============================================
+       HERO SECTION
+       ============================================ */
+    .hero-section {
+      padding: var(--spacing-2xl) 0;
+      text-align: center;
+    }
+    
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-xs);
+      padding: var(--spacing-xs) var(--spacing-md);
+      background-color: var(--base-blue);
+      border-radius: 20px;
+      font-size: var(--font-size-sm);
+      font-weight: 600;
+      margin-bottom: var(--spacing-lg);
+    }
+    
+    .hero-title {
+      font-size: var(--font-size-4xl);
+      font-weight: 700;
+      margin-bottom: var(--spacing-md);
+      line-height: 1.1;
+    }
+    
+    .hero-title .base-highlight {
+      color: var(--base-blue);
+    }
+    
+    .hero-subtitle {
+      font-size: var(--font-size-lg);
+      color: var(--text-secondary);
+      max-width: 600px;
+      margin: 0 auto var(--spacing-xl);
+      line-height: 1.5;
+    }
+    
+    /* ============================================
+       SEARCH BAR
+       ============================================ */
+    .search-container {
+      max-width: 600px;
+      margin: 0 auto var(--spacing-xl);
+    }
+    
+    .search-bar {
+      position: relative;
+      width: 100%;
+    }
+    
+    .search-input {
+      width: 100%;
+      padding: var(--spacing-md) var(--spacing-xl) var(--spacing-md) var(--spacing-xl);
+      background-color: var(--dark-card);
+      border: 1px solid var(--dark-border);
+      border-radius: 12px;
+      color: var(--text-primary);
+      font-size: var(--font-size-base);
+      transition: all var(--transition-base);
+    }
+    
+    .search-input:focus {
+      outline: none;
+      border-color: var(--base-blue);
+      box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.1);
+    }
+    
+    .search-icon {
+      position: absolute;
+      left: var(--spacing-md);
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--text-tertiary);
+      pointer-events: none;
+    }
+    
+    .search-filter-btn {
+      position: absolute;
+      right: var(--spacing-md);
+      top: 50%;
+      transform: translateY(-50%);
+      background: transparent;
+      border: none;
+      color: var(--text-tertiary);
+      cursor: pointer;
+      padding: var(--spacing-xs);
+    }
+    
+    /* ============================================
+       KEY METRICS
+       ============================================ */
+    .metrics-container {
+      display: flex;
+      justify-content: center;
+      gap: var(--spacing-lg);
+      margin-bottom: var(--spacing-xl);
+      flex-wrap: wrap;
+    }
+    
+    .metric-card {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-sm);
+      padding: var(--spacing-md);
+      background-color: var(--dark-card);
+      border-radius: 12px;
+      min-width: 200px;
+    }
+    
+    .metric-icon {
+      width: 24px;
+      height: 24px;
+      fill: var(--base-blue);
+    }
+    
+    .metric-content {
+      display: flex;
+      flex-direction: column;
+    }
+    
+    .metric-label {
+      font-size: var(--font-size-xs);
+      color: var(--text-tertiary);
+    }
+    
+    .metric-value {
+      font-size: var(--font-size-base);
+      font-weight: 600;
+    }
+    
+    /* ============================================
+       ACTION BUTTONS
+       ============================================ */
+    .action-buttons {
+      display: flex;
+      justify-content: center;
+      gap: var(--spacing-md);
+      margin-bottom: var(--spacing-xl);
+      flex-wrap: wrap;
+    }
+    
+    .action-btn {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-sm);
+      padding: var(--spacing-md) var(--spacing-lg);
+      background-color: var(--dark-card);
+      border: 1px solid var(--dark-border);
+      border-radius: 12px;
+      color: var(--text-primary);
+      text-decoration: none;
+      font-size: var(--font-size-sm);
+      font-weight: 600;
+      transition: all var(--transition-base);
+      cursor: pointer;
+    }
+    
+    .action-btn:hover {
+      background-color: var(--dark-border);
+      border-color: var(--base-blue);
+    }
+    
+    /* ============================================
+       CATEGORY FILTERS
+       ============================================ */
+    .category-filters {
+      display: flex;
+      gap: var(--spacing-sm);
+      overflow-x: auto;
+      padding: var(--spacing-md) 0;
+      margin-bottom: var(--spacing-xl);
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+    }
+    
+    .category-filters::-webkit-scrollbar {
+      display: none;
+    }
+    
+    .category-btn {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-xs);
+      padding: var(--spacing-sm) var(--spacing-md);
+      background-color: var(--dark-card);
+      border: 1px solid var(--dark-border);
+      border-radius: 20px;
+      color: var(--text-secondary);
+      text-decoration: none;
+      font-size: var(--font-size-sm);
+      font-weight: 600;
+      white-space: nowrap;
+      transition: all var(--transition-base);
+      cursor: pointer;
+      min-height: 44px;
+    }
+    
+    .category-btn:hover {
+      color: var(--text-primary);
+      border-color: var(--base-blue);
+    }
+    
+    .category-btn.active {
+      background-color: var(--base-blue);
+      border-color: var(--base-blue);
+      color: var(--text-primary);
+    }
+    
+    /* ============================================
+       APP DISCOVERY FEED
+       ============================================ */
+    .apps-grid {
+      display: grid;
+      grid-template-columns: repeat(1, 1fr);
+      gap: var(--spacing-lg);
+      padding: var(--spacing-xl) 0;
+    }
+    
+    @media (min-width: 768px) {
+      .apps-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+    
+    @media (min-width: 1024px) {
+      .apps-grid {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+    
+    .app-card {
+      background-color: var(--dark-card);
+      border: 1px solid var(--dark-border);
+      border-radius: 16px;
+      padding: var(--spacing-lg);
+      transition: all var(--transition-base);
+      cursor: pointer;
+      opacity: 0;
+      transform: translateY(20px);
+      animation: fadeInUp 0.3s var(--ease) forwards;
+    }
+    
+    .app-card:hover {
+      transform: scale(1.02);
+      box-shadow: 0 8px 24px rgba(0, 82, 255, 0.2);
+      border-color: var(--base-blue);
+    }
+    
+    .app-card-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: var(--spacing-md);
+    }
+    
+    .app-logo {
+      font-size: 48px;
+      line-height: 1;
+      transition: transform var(--transition-base);
+    }
+    
+    .app-card:hover .app-logo {
+      transform: rotate(5deg);
+    }
+    
+    .app-badges {
+      display: flex;
+      gap: var(--spacing-xs);
+      flex-wrap: wrap;
+    }
+    
+    .badge-trending {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-xs);
+      padding: var(--spacing-xs) var(--spacing-sm);
+      background-color: var(--red);
+      border-radius: 12px;
+      font-size: var(--font-size-xs);
+      font-weight: 600;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    
+    .badge-category {
+      display: inline-flex;
+      align-items: center;
+      padding: var(--spacing-xs) var(--spacing-sm);
+      background-color: var(--dark-surface);
+      border-radius: 12px;
+      font-size: var(--font-size-xs);
+      font-weight: 600;
+      text-transform: capitalize;
+    }
+    
+    .app-name {
+      font-size: var(--font-size-base);
+      font-weight: 700;
+      margin-bottom: var(--spacing-sm);
+      color: var(--text-primary);
+    }
+    
+    .app-description {
+      font-size: var(--font-size-sm);
+      color: var(--text-secondary);
+      line-height: 1.5;
+      margin-bottom: var(--spacing-md);
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    
+    .app-metrics {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--spacing-md);
+      padding-top: var(--spacing-md);
+      border-top: 1px solid var(--dark-border);
+    }
+    
+    .app-users {
+      font-size: var(--font-size-sm);
+      color: var(--text-secondary);
+      font-weight: 600;
+    }
+    
+    .app-rating {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-xs);
+      font-size: var(--font-size-sm);
+      font-weight: 600;
+      color: var(--gold);
+    }
+    
+    .app-actions {
+      display: flex;
+      gap: var(--spacing-sm);
+    }
+    
+    .btn-try-app {
+      flex: 1;
+      padding: var(--spacing-md);
+      background-color: var(--base-blue);
+      border: none;
+      border-radius: 12px;
+      color: var(--text-primary);
+      font-size: var(--font-size-sm);
+      font-weight: 600;
+      cursor: pointer;
+      transition: all var(--transition-base);
+    }
+    
+    .btn-try-app:hover {
+      background-color: var(--base-blue-hover);
+      transform: translateY(-1px);
+    }
+    
+    .btn-save {
+      width: 48px;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--dark-surface);
+      border: 1px solid var(--dark-border);
+      border-radius: 12px;
+      color: var(--text-secondary);
+      font-size: var(--font-size-lg);
+      cursor: pointer;
+      transition: all var(--transition-base);
+    }
+    
+    .btn-save:hover {
+      border-color: var(--base-blue);
+      color: var(--text-primary);
+    }
+    
+    .btn-save.saved {
+      color: var(--red);
+      border-color: var(--red);
+    }
+    
+    .empty-state {
+      text-align: center;
+      padding: var(--spacing-2xl);
+      color: var(--text-secondary);
+    }
+    
+    .result-count {
+      padding: var(--spacing-md) 0;
+      color: var(--text-secondary);
+      font-size: var(--font-size-sm);
+    }
+    
+    /* ============================================
+       ANIMATIONS
+       ============================================ */
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    
+    @keyframes pulse {
+      0%, 100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+    }
+    
+    @keyframes shimmer {
+      0% {
+        background-position: -1000px 0;
+      }
+      100% {
+        background-position: 1000px 0;
+      }
+    }
+    
+    .loading-skeleton {
+      background: linear-gradient(
+        90deg,
+        var(--dark-card) 0%,
+        var(--dark-border) 50%,
+        var(--dark-card) 100%
+      );
+      background-size: 1000px 100%;
+      animation: shimmer 1.5s infinite;
+      border-radius: 16px;
+      min-height: 200px;
+    }
+    
+    /* ============================================
+       AUTHENTICATION MODAL
+       ============================================ */
+    .modal-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.8);
+      backdrop-filter: blur(8px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10000;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity var(--transition-base);
+    }
+    
+    .modal-overlay.active {
+      opacity: 1;
+      pointer-events: all;
+    }
+    
+    .modal {
+      background-color: var(--dark-card);
+      border: 1px solid var(--dark-border);
+      border-radius: 20px;
+      padding: var(--spacing-xl);
+      max-width: 500px;
+      width: 90%;
+      max-height: 90vh;
+      overflow-y: auto;
+      transform: scale(0.95) translateY(20px);
+      transition: transform var(--transition-base);
+      position: relative;
+    }
+    
+    .modal-overlay.active .modal {
+      transform: scale(1) translateY(0);
+    }
+    
+    .modal-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--spacing-lg);
+    }
+    
+    .modal-title {
+      font-size: var(--font-size-xl);
+      font-weight: 700;
+      margin: 0;
+    }
+    
+    .modal-close {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      color: var(--text-secondary);
+      font-size: var(--font-size-xl);
+      cursor: pointer;
+      border-radius: 8px;
+      transition: all var(--transition-base);
+    }
+    
+    .modal-close:hover {
+      background-color: var(--dark-surface);
+      color: var(--text-primary);
+    }
+    
+    .modal-content {
+      margin-bottom: var(--spacing-lg);
+    }
+    
+    .modal-description {
+      color: var(--text-secondary);
+      line-height: 1.6;
+      margin-bottom: var(--spacing-lg);
+    }
+    
+    .auth-options {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-md);
+    }
+    
+    .auth-option {
+      padding: var(--spacing-md);
+      background-color: var(--dark-surface);
+      border: 1px solid var(--dark-border);
+      border-radius: 12px;
+      cursor: pointer;
+      transition: all var(--transition-base);
+    }
+    
+    .auth-option:hover {
+      border-color: var(--base-blue);
+      background-color: var(--dark-card);
+    }
+    
+    .auth-option-header {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-md);
+      margin-bottom: var(--spacing-sm);
+    }
+    
+    .auth-option-icon {
+      font-size: var(--font-size-xl);
+    }
+    
+    .auth-option-title {
+      font-weight: 600;
+      margin: 0;
+    }
+    
+    .auth-option-description {
+      font-size: var(--font-size-sm);
+      color: var(--text-secondary);
+      margin: 0;
+    }
+    
+    .auth-button-primary {
+      width: 100%;
+      padding: var(--spacing-md);
+      background-color: var(--base-blue);
+      border: none;
+      border-radius: 12px;
+      color: var(--text-primary);
+      font-size: var(--font-size-base);
+      font-weight: 600;
+      cursor: pointer;
+      transition: all var(--transition-base);
+      margin-top: var(--spacing-md);
+    }
+    
+    .auth-button-primary:hover {
+      background-color: var(--base-blue-hover);
+      transform: translateY(-1px);
+    }
+    
+    .auth-button-primary:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      transform: none;
+    }
+    
+    .auth-button-secondary {
+      width: 100%;
+      padding: var(--spacing-md);
+      background-color: transparent;
+      border: 1px solid var(--dark-border);
+      border-radius: 12px;
+      color: var(--text-secondary);
+      font-size: var(--font-size-base);
+      font-weight: 600;
+      cursor: pointer;
+      transition: all var(--transition-base);
+      margin-top: var(--spacing-sm);
+    }
+    
+    .auth-button-secondary:hover {
+      border-color: var(--base-blue);
+      color: var(--text-primary);
+    }
+    
+    .auth-error {
+      padding: var(--spacing-md);
+      background-color: rgba(255, 59, 48, 0.1);
+      border: 1px solid var(--red);
+      border-radius: 12px;
+      color: var(--red);
+      font-size: var(--font-size-sm);
+      margin-bottom: var(--spacing-md);
+      display: none;
+    }
+    
+    .auth-error.active {
+      display: block;
+    }
+    
+    .auth-loading {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      border: 2px solid var(--text-primary);
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.6s linear infinite;
+      margin-right: var(--spacing-sm);
+    }
+    
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+    
+    /* Focus trap for modal */
+    .modal:focus {
+      outline: none;
+    }
+    
+    /* ============================================
+       RESPONSIVE DESIGN
+       ============================================ */
+    @media (max-width: 767px) {
+      .nav-links {
+        display: none;
+      }
+      
+      .nav-right {
+        gap: var(--spacing-sm);
+      }
+      
+      .tagline {
+        display: none;
+      }
+      
+      .hero-title {
+        font-size: var(--font-size-2xl);
+      }
+      
+      .metrics-container {
+        flex-direction: column;
+        align-items: stretch;
+      }
+      
+      .metric-card {
+        min-width: auto;
+      }
+      
+      .app-card {
+        padding: var(--spacing-md);
+      }
+      
+      .app-logo {
+        font-size: 36px;
+      }
+    }
+    
+    /* ============================================
+       ACCESSIBILITY
+       ============================================ */
+    @media (prefers-reduced-motion: reduce) {
+      *,
+      *::before,
+      *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+      }
+    }
+    
+    /* Focus styles */
+    *:focus-visible {
+      outline: 2px solid var(--base-blue);
+      outline-offset: 2px;
+    }
+    
+    button:focus-visible,
+    a:focus-visible {
+      outline: 2px solid var(--base-blue);
+      outline-offset: 2px;
+    }
+  </style>
+</head>
+<body>
+  <!-- Top Navigation Bar -->
+  <nav class="top-nav" role="navigation" aria-label="Main navigation">
+    <div class="nav-container">
+      <div class="nav-left">
+        <a href="/" class="logo-section" aria-label="BaseLaunch Home">
+          <svg class="logo-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+          <span class="logo-text">BaseLaunch</span>
+          <span class="tagline">Built on Base</span>
+        </a>
+        <ul class="nav-links">
+          <li><a href="/" class="nav-link active" aria-current="page">
+            <span>🏠</span> Home
+          </a></li>
+          <li><a href="#launch" class="nav-link" onclick="event.preventDefault(); handleCreateWaitlist();">
+            <span>🚀</span> Launch
+          </a></li>
+          <li><a href="#analytics" class="nav-link">
+            <span>📊</span> Analytics
+          </a></li>
+          <li><a href="#rankings" class="nav-link">
+            <span>🏆</span> Rankings
+          </a></li>
+          <li><a href="#dev-tools" class="nav-link">
+            <span>⬆️</span> Dev Tools
+          </a></li>
+          <li><a href="#profile" class="nav-link">
+            <span>👤</span> Profile
+          </a></li>
+        </ul>
+      </div>
+      <div class="nav-right">
+        <button class="icon-button" aria-label="Toggle dark mode">
+          <span>☀️</span>
+        </button>
+        <button class="icon-button" aria-label="Notifications">
+          <span>🔔</span>
+          <span class="sr-only">You have notifications</span>
+        </button>
+        <div class="rank-badge">
+          <span>🏆</span>
+          <span>Rank #42</span>
+        </div>
+        <div class="wallet-address">
+          <span class="wallet-dot" aria-hidden="true"></span>
+          <span>0x3bB4...4AE5</span>
+        </div>
+        <button class="icon-button" aria-label="Wallet menu">
+          <span>→</span>
+        </button>
+      </div>
+    </div>
+  </nav>
+
+  <!-- Hero Section -->
+  <section class="hero-section" aria-labelledby="hero-title">
+    <div class="container">
+      <div class="badge">
+        <span>🚀</span>
+        <span>50+ Base Apps Live</span>
+      </div>
+      <h1 id="hero-title" class="hero-title">
+        Discover & Launch on <span class="base-highlight">Base</span>
+      </h1>
+      <p class="hero-subtitle">
+        The premier platform for discovering trending apps, launching your project, and growing your community on Base.
+      </p>
+      
+      <!-- Search Bar -->
+      <div class="search-container">
+        <div class="search-bar">
+          <span class="search-icon" aria-hidden="true">🔍</span>
+          <input 
+            type="search" 
+            class="search-input" 
+            placeholder="Search apps, categories, or features..."
+            aria-label="Search apps, categories, or features"
+            id="search-input"
+          />
+          <button class="search-filter-btn" aria-label="Filter or sort results">
+            <span>⚙️</span>
+          </button>
+        </div>
+      </div>
+      
+      <!-- Key Metrics -->
+      <div class="metrics-container" role="region" aria-label="Network metrics">
+        <div class="metric-card">
+          <svg class="metric-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2"/>
+          </svg>
+          <div class="metric-content">
+            <span class="metric-label">Block Height</span>
+            <span class="metric-value">22.0M <span style="color: var(--green);">●</span></span>
+          </div>
+        </div>
+        <div class="metric-card">
+          <svg class="metric-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2"/>
+          </svg>
+          <div class="metric-content">
+            <span class="metric-label">Gas Price</span>
+            <span class="metric-value">0.0015 Gwei</span>
+          </div>
+        </div>
+        <div class="metric-card">
+          <svg class="metric-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M18 8L12 2L6 8M6 16L12 22L18 16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+          <div class="metric-content">
+            <span class="metric-label">24h Transactions</span>
+            <span class="metric-value">890.1K</span>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Action Buttons -->
+      <div class="action-buttons">
+        <a href="#weekly-digest" class="action-btn">
+          <span>✉️</span>
+          <span>Weekly Digest</span>
+        </a>
+        <a href="#analytics" class="action-btn">
+          <span>📊</span>
+          <span>Analytics</span>
+        </a>
+        <a href="#notifications" class="action-btn">
+          <span>🔔</span>
+          <span>Notifications</span>
+        </a>
+      </div>
+      
+      <!-- Category Filters -->
+      <div class="category-filters" role="tablist" aria-label="Filter apps by category">
+        <button class="category-btn active" role="tab" aria-selected="true" aria-controls="apps-all" data-category="all">
+          <span>✨</span>
+          <span>All</span>
+        </button>
+        <button class="category-btn" role="tab" aria-selected="false" aria-controls="apps-gaming" data-category="gaming">
+          <span>🎮</span>
+          <span>Gaming</span>
+        </button>
+        <button class="category-btn" role="tab" aria-selected="false" aria-controls="apps-defi" data-category="defi">
+          <span>💰</span>
+          <span>DeFi</span>
+        </button>
+        <button class="category-btn" role="tab" aria-selected="false" aria-controls="apps-social" data-category="social">
+          <span>🌐</span>
+          <span>Social</span>
+        </button>
+        <button class="category-btn" role="tab" aria-selected="false" aria-controls="apps-ai" data-category="ai">
+          <span>🤖</span>
+          <span>AI</span>
+        </button>
+        <button class="category-btn" role="tab" aria-selected="false" aria-controls="apps-creator" data-category="creator">
+          <span>🎨</span>
+          <span>Creator</span>
+        </button>
+        <button class="category-btn" role="tab" aria-selected="false" aria-controls="apps-utility" data-category="utility">
+          <span>🔧</span>
+          <span>Utility</span>
+        </button>
+        <button class="category-btn" role="tab" aria-selected="false" aria-controls="apps-nft" data-category="nft">
+          <span>🖼️</span>
+          <span>NFT</span>
+        </button>
+      </div>
+    </div>
+  </section>
+
+  <!-- App Discovery Feed -->
+  <main id="app-feed" role="main" aria-label="App discovery feed">
+    <div class="container">
+      <div id="result-count" class="result-count" aria-live="polite"></div>
+      <div id="apps-grid" class="apps-grid" role="list"></div>
+      <div id="empty-state" class="empty-state" style="display: none;">
+        <p>No apps found matching your criteria.</p>
+        <p style="margin-top: var(--spacing-sm); font-size: var(--font-size-sm);">
+          Try adjusting your search or filters.
+        </p>
+      </div>
+    </div>
+  </main>
+
+  <!-- Authentication Modal -->
+  <div id="auth-modal" class="modal-overlay" role="dialog" aria-labelledby="auth-modal-title" aria-modal="true" aria-hidden="true">
+    <div class="modal">
+      <div class="modal-header">
+        <h2 id="auth-modal-title" class="modal-title">Sign In Required</h2>
+        <button class="modal-close" onclick="closeAuthModal()" aria-label="Close authentication modal">×</button>
+      </div>
+      <div class="modal-content">
+        <p class="modal-description" id="auth-modal-description">
+          You need to sign in to perform this action. Choose how you'd like to connect:
+        </p>
+        <div id="auth-error" class="auth-error" role="alert"></div>
+        <div class="auth-options">
+          <div class="auth-option" onclick="selectAuthMethod('base')" role="button" tabindex="0" onkeydown="if(event.key==='Enter') selectAuthMethod('base')">
+            <div class="auth-option-header">
+              <span class="auth-option-icon">🚀</span>
+              <div>
+                <h3 class="auth-option-title">Base Account</h3>
+                <p class="auth-option-description">Recommended: Sign in with Base Account for seamless experience</p>
+              </div>
+            </div>
+          </div>
+          <div class="auth-option" onclick="selectAuthMethod('walletconnect')" role="button" tabindex="0" onkeydown="if(event.key==='Enter') selectAuthMethod('walletconnect')">
+            <div class="auth-option-header">
+              <span class="auth-option-icon">🔗</span>
+              <div>
+                <h3 class="auth-option-title">WalletConnect</h3>
+                <p class="auth-option-description">Connect with MetaMask, Coinbase Wallet, or other compatible wallets</p>
+              </div>
+            </div>
+          </div>
+          <div class="auth-option" onclick="selectAuthMethod('ledger')" role="button" tabindex="0" onkeydown="if(event.key==='Enter') selectAuthMethod('ledger')">
+            <div class="auth-option-header">
+              <span class="auth-option-icon">🔒</span>
+              <div>
+                <h3 class="auth-option-title">Ledger</h3>
+                <p class="auth-option-description">Connect using your Ledger hardware wallet</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <button id="auth-connect-btn" class="auth-button-primary" onclick="connectWallet()" disabled>
+          <span id="auth-loading" class="auth-loading" style="display: none;"></span>
+          <span id="auth-button-text">Select a connection method</span>
+        </button>
+        <button class="auth-button-secondary" onclick="skipAuth()">
+          Continue without signing in (read-only mode)
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    /* ============================================
+       STATE MANAGEMENT (JS Variables Only)
+       ============================================ */
+    const AppState = {
+      currentCategory: 'all',
+      searchQuery: '',
+      apps: [], // Will be populated with mock data
+      user: {
+        connected: false,
+        address: null,
+        rank: 42,
+        authMethod: null,
+        pendingAction: null // Stores the action that triggered auth (e.g., 'create-waitlist', 'share-farcaster')
+      },
+      filters: {
+        sort: 'trending',
+        view: 'grid'
+      },
+      savedApps: []
+    };
+
+    /* ============================================
+       MOCK DATA - 50 Apps
+       ============================================ */
+    function generateMockApps() {
+      const categories = ['gaming', 'defi', 'social', 'ai', 'creator', 'utility', 'nft'];
+      const apps = [];
+      
+      const appNames = [
+        'BaseQuest', 'DeFiMaster', 'SocialHub', 'AIPredict', 'CreatorStudio',
+        'UtilityPro', 'NFTMarket', 'GameFi', 'SwapZone', 'FriendChain',
+        'BotBuilder', 'DesignLab', 'ToolKit', 'ArtGallery', 'PlayEarn',
+        'TradeHub', 'ConnectApp', 'SmartBot', 'PixelArt', 'DevTools',
+        'RPGWorld', 'YieldFarm', 'ChatApp', 'MLModel', 'ContentHub',
+        'Analytics', 'MintPass', 'BattleGame', 'LendBorrow', 'SocialFeed',
+        'AIAssist', 'MusicHub', 'Workflow', 'Collectible', 'StrategyGame',
+        'Staking', 'Forum', 'GPTApp', 'VideoEdit', 'AdminPanel',
+        'ActionGame', 'DEX', 'Messenger', 'ImageGen', 'Blogging',
+        'TaskMgmt', 'RareNFT', 'CardGame', 'Vault', 'StatusApp'
+      ];
+      
+      for (let i = 0; i < 50; i++) {
+        const category = categories[i % categories.length];
+        const users = Math.floor(Math.random() * 50000) + 1000;
+        const rating = (Math.random() * 1.5 + 3.5).toFixed(1);
+        const isTrending = i < 5;
+        
+        apps.push({
+          id: i + 1,
+          name: appNames[i] || `App ${i + 1}`,
+          category: category,
+          description: `An amazing ${category} app built on Base that revolutionizes how users interact with blockchain technology.`,
+          users: users,
+          rating: parseFloat(rating),
+          trending: isTrending,
+          logo: getCategoryEmoji(category),
+          launchDate: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString()
+        });
+      }
+      
+      return apps;
+    }
+    
+    function getCategoryEmoji(category) {
+      const emojis = {
+        gaming: '🎮',
+        defi: '💰',
+        social: '🌐',
+        ai: '🤖',
+        creator: '🎨',
+        utility: '🔧',
+        nft: '🖼️'
+      };
+      return emojis[category] || '📱';
+    }
+
+    /* ============================================
+       INITIALIZATION
+       ============================================ */
+    function init() {
+      // Populate mock data
+      AppState.apps = generateMockApps();
+      
+      // Setup event listeners
+      setupEventListeners();
+      
+      // Initialize from URL params (if any)
+      initializeFromURL();
+      
+      // Initial render
+      filterApps();
+      
+      console.log('BaseLaunch initialized with', AppState.apps.length, 'apps');
+    }
+
+    /* ============================================
+       EVENT LISTENERS
+       ============================================ */
+    function setupEventListeners() {
+      // Search input
+      const searchInput = document.getElementById('search-input');
+      if (searchInput) {
+        let searchTimeout;
+        searchInput.addEventListener('input', (e) => {
+          clearTimeout(searchTimeout);
+          searchTimeout = setTimeout(() => {
+            AppState.searchQuery = e.target.value.toLowerCase();
+            filterApps();
+          }, 200); // 200ms debounce
+        });
+      }
+      
+      // Category filters
+      const categoryButtons = document.querySelectorAll('.category-btn');
+      categoryButtons.forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          e.preventDefault();
+          const category = btn.dataset.category;
+          setActiveCategory(category);
+        });
+      });
+      
+      // Keyboard navigation for category filters
+      categoryButtons.forEach(btn => {
+        btn.addEventListener('keydown', (e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            const category = btn.dataset.category;
+            setActiveCategory(category);
+          }
+        });
+      });
+    }
+
+    function setActiveCategory(category) {
+      AppState.currentCategory = category;
+      
+      // Update UI
+      document.querySelectorAll('.category-btn').forEach(btn => {
+        const isActive = btn.dataset.category === category;
+        btn.classList.toggle('active', isActive);
+        btn.setAttribute('aria-selected', isActive);
+      });
+      
+      // Filter apps
+      filterApps();
+      
+      // Update URL without reload
+      updateURL();
+    }
+
+    function filterApps() {
+      let filtered = AppState.apps;
+      
+      // Filter by category
+      if (AppState.currentCategory !== 'all') {
+        filtered = filtered.filter(app => app.category === AppState.currentCategory);
+      }
+      
+      // Filter by search query
+      if (AppState.searchQuery) {
+        const query = AppState.searchQuery.toLowerCase();
+        filtered = filtered.filter(app => 
+          app.name.toLowerCase().includes(query) ||
+          app.description.toLowerCase().includes(query) ||
+          app.category.toLowerCase().includes(query)
+        );
+      }
+      
+      // Render apps
+      renderApps(filtered);
+      
+      // Update result count
+      updateResultCount(filtered.length);
+      
+      // Update URL
+      updateURL();
+    }
+
+    function renderApps(apps) {
+      const grid = document.getElementById('apps-grid');
+      const emptyState = document.getElementById('empty-state');
+      
+      if (!grid) return;
+      
+      // Clear existing content
+      grid.innerHTML = '';
+      
+      if (apps.length === 0) {
+        grid.style.display = 'none';
+        emptyState.style.display = 'block';
+        return;
+      }
+      
+      grid.style.display = 'grid';
+      emptyState.style.display = 'none';
+      
+      // Render each app card with stagger animation
+      apps.forEach((app, index) => {
+        const card = createAppCard(app);
+        card.style.animationDelay = `${index * 0.1}s`;
+        grid.appendChild(card);
+      });
+    }
+
+    function createAppCard(app) {
+      const card = document.createElement('article');
+      card.className = 'app-card';
+      card.setAttribute('role', 'listitem');
+      card.setAttribute('aria-label', `${app.name} - ${app.category} app`);
+      
+      const usersFormatted = app.users >= 1000 
+        ? `${(app.users / 1000).toFixed(1)}k`
+        : app.users.toString();
+      
+      const categoryName = app.category.charAt(0).toUpperCase() + app.category.slice(1);
+      
+      card.innerHTML = `
+        <div class="app-card-header">
+          <div class="app-logo" aria-hidden="true">${escapeHtml(app.logo)}</div>
+          <div class="app-badges">
+            ${app.trending ? '<span class="badge-trending">🔥 Trending</span>' : ''}
+            <span class="badge-category">${escapeHtml(categoryName)}</span>
+          </div>
+        </div>
+        <h3 class="app-name">${escapeHtml(app.name)}</h3>
+        <p class="app-description">${escapeHtml(app.description)}</p>
+        <div class="app-metrics">
+          <span class="app-users">${usersFormatted} users</span>
+          <span class="app-rating">
+            <span>⭐</span>
+            <span>${app.rating.toFixed(1)}/5</span>
+          </span>
+        </div>
+        <div class="app-actions">
+          <button class="btn-try-app" onclick="handleTryApp(${app.id})" aria-label="Try ${escapeHtml(app.name)}">
+            Try App
+          </button>
+          <button class="btn-save" onclick="handleSaveApp(${app.id})" aria-label="Save ${escapeHtml(app.name)} for later">
+            ❤️
+          </button>
+        </div>
+      `;
+      
+      // Make entire card clickable
+      card.addEventListener('click', (e) => {
+        if (!e.target.closest('.app-actions')) {
+          handleAppClick(app.id);
+        }
+      });
+      
+      return card;
+    }
+
+    function escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+
+    function updateResultCount(count) {
+      const resultCount = document.getElementById('result-count');
+      if (resultCount) {
+        if (count === 0) {
+          resultCount.textContent = '';
+        } else {
+          resultCount.textContent = `${count} ${count === 1 ? 'app' : 'apps'} found`;
+        }
+      }
+    }
+
+    // Read-only action - NO auth required initially
+    // Wallet may be needed when actually launching mini app, but browsing/clicking doesn't require auth
+    function handleTryApp(appId) {
+      const app = AppState.apps.find(a => a.id === appId);
+      if (app) {
+        console.log('Try app:', app.name);
+        // TODO: Implement app launch functionality
+        // Note: Opening mini app may require wallet connection at that point,
+        // but clicking "Try App" button doesn't require auth upfront
+        alert(`Launching ${app.name}... (To be implemented)`);
+      }
+    }
+
+    // Read-only action - NO auth required
+    function handleSaveApp(appId) {
+      // Saving apps for later is allowed without authentication
+      // This works in read-only mode (stored in JS variables only)
+      if (!AppState.savedApps) {
+        AppState.savedApps = [];
+      }
+      
+      const index = AppState.savedApps.indexOf(appId);
+      const button = event.target.closest('.btn-save');
+      
+      if (index > -1) {
+        AppState.savedApps.splice(index, 1);
+        button.classList.remove('saved');
+        button.setAttribute('aria-label', button.getAttribute('aria-label').replace('Remove', 'Save'));
+      } else {
+        AppState.savedApps.push(appId);
+        button.classList.add('saved');
+        button.setAttribute('aria-label', button.getAttribute('aria-label').replace('Save', 'Remove'));
+      }
+    }
+
+    function handleAppClick(appId) {
+      const app = AppState.apps.find(a => a.id === appId);
+      if (app) {
+        console.log('View app details:', app.name);
+        // TODO: Implement app detail modal
+      }
+    }
+
+    function initializeFromURL() {
+      const params = new URLSearchParams(window.location.search);
+      const category = params.get('category');
+      const search = params.get('search');
+      
+      if (category) {
+        setActiveCategory(category);
+      }
+      
+      if (search) {
+        const searchInput = document.getElementById('search-input');
+        if (searchInput) {
+          searchInput.value = search;
+          AppState.searchQuery = search.toLowerCase();
+        }
+      }
+    }
+
+    function updateURL() {
+      const params = new URLSearchParams();
+      if (AppState.currentCategory !== 'all') {
+        params.set('category', AppState.currentCategory);
+      }
+      if (AppState.searchQuery) {
+        params.set('search', AppState.searchQuery);
+      }
+      
+      const newURL = params.toString() 
+        ? `${window.location.pathname}?${params.toString()}`
+        : window.location.pathname;
+      
+      window.history.replaceState({}, '', newURL);
+    }
+
+    /* ============================================
+       PROGRESSIVE AUTHENTICATION SYSTEM
+       ============================================ */
+    
+    let selectedAuthMethod = null;
+    
+    // Open auth modal for protected actions
+    function requireAuth(actionType, actionDescription) {
+      // If already connected, allow action
+      if (AppState.user.connected) {
+        return true;
+      }
+      
+      // Store pending action
+      AppState.user.pendingAction = {
+        type: actionType,
+        description: actionDescription
+      };
+      
+      // Update modal description based on action
+      const modalDescription = document.getElementById('auth-modal-description');
+      if (modalDescription) {
+        modalDescription.textContent = `${actionDescription} requires signing in. Choose how you'd like to connect:`;
+      }
+      
+      // Open modal
+      openAuthModal();
+      return false;
+    }
+    
+    function openAuthModal() {
+      const modal = document.getElementById('auth-modal');
+      if (modal) {
+        modal.classList.add('active');
+        modal.setAttribute('aria-hidden', 'false');
+        document.body.style.overflow = 'hidden';
+        
+        // Focus trap
+        const firstFocusable = modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (firstFocusable) {
+          firstFocusable.focus();
+        }
+        
+        // Close on Escape key
+        const handleEscape = (e) => {
+          if (e.key === 'Escape') {
+            closeAuthModal();
+            document.removeEventListener('keydown', handleEscape);
+          }
+        };
+        document.addEventListener('keydown', handleEscape);
+      }
+    }
+    
+    function closeAuthModal() {
+      const modal = document.getElementById('auth-modal');
+      if (modal) {
+        modal.classList.remove('active');
+        modal.setAttribute('aria-hidden', 'true');
+        document.body.style.overflow = '';
+        selectedAuthMethod = null;
+        updateAuthButton();
+        
+        // Clear error
+        const errorEl = document.getElementById('auth-error');
+        if (errorEl) {
+          errorEl.classList.remove('active');
+          errorEl.textContent = '';
+        }
+      }
+    }
+    
+    function selectAuthMethod(method) {
+      selectedAuthMethod = method;
+      updateAuthButton();
+      
+      // Highlight selected option
+      document.querySelectorAll('.auth-option').forEach(opt => {
+        opt.style.borderColor = '';
+      });
+      event.currentTarget.style.borderColor = 'var(--base-blue)';
+    }
+    
+    function updateAuthButton() {
+      const btn = document.getElementById('auth-connect-btn');
+      const btnText = document.getElementById('auth-button-text');
+      
+      if (btn && btnText) {
+        if (selectedAuthMethod) {
+          btn.disabled = false;
+          const methodNames = {
+            base: 'Base Account',
+            walletconnect: 'WalletConnect',
+            ledger: 'Ledger'
+          };
+          btnText.textContent = `Connect with ${methodNames[selectedAuthMethod] || selectedAuthMethod}`;
+        } else {
+          btn.disabled = true;
+          btnText.textContent = 'Select a connection method';
+        }
+      }
+    }
+    
+    async function connectWallet() {
+      if (!selectedAuthMethod) {
+        return;
+      }
+      
+      const loadingEl = document.getElementById('auth-loading');
+      const btn = document.getElementById('auth-connect-btn');
+      const errorEl = document.getElementById('auth-error');
+      
+      if (loadingEl) loadingEl.style.display = 'inline-block';
+      if (btn) btn.disabled = true;
+      if (errorEl) {
+        errorEl.classList.remove('active');
+        errorEl.textContent = '';
+      }
+      
+      try {
+        // TODO: Integrate Base Account SDK here
+        // For now, simulate connection
+        await simulateWalletConnection(selectedAuthMethod);
+        
+        // Connection successful
+        AppState.user.connected = true;
+        AppState.user.authMethod = selectedAuthMethod;
+        AppState.user.address = '0x3bB4b52253383A088beE7806133526D7eFFe4AE5'; // Mock address
+        
+        // Update UI
+        updateWalletDisplay();
+        
+        // Close modal
+        closeAuthModal();
+        
+        // Execute pending action if any
+        if (AppState.user.pendingAction) {
+          executePendingAction();
+        }
+        
+        console.log('Wallet connected:', selectedAuthMethod);
+      } catch (error) {
+        console.error('Connection failed:', error);
+        if (errorEl) {
+          errorEl.textContent = error.message || 'Connection failed. Please try again.';
+          errorEl.classList.add('active');
+        }
+      } finally {
+        if (loadingEl) loadingEl.style.display = 'none';
+        if (btn) btn.disabled = false;
+      }
+    }
+    
+    // Simulate wallet connection (replace with real SDK integration)
+    function simulateWalletConnection(method) {
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          // Simulate connection delay
+          if (Math.random() > 0.1) { // 90% success rate
+            resolve();
+          } else {
+            reject(new Error('Connection cancelled or failed'));
+          }
+        }, 1500);
+      });
+      
+      /* REAL INTEGRATION WOULD LOOK LIKE:
+      
+      // For Base Account SDK:
+      const sdk = createBaseAccountSDK({
+        appName: "BaseLaunch",
+      });
+      
+      const provider = sdk.getProvider();
+      
+      // Get nonce from backend
+      const nonceResponse = await fetch('/api/auth/nonce');
+      const { nonce } = await nonceResponse.json();
+      
+      // Connect with SIWE
+      const connectResponse = await provider.request({
+        method: "wallet_connect",
+        params: [{
+          version: "1",
+          capabilities: {
+            signInWithEthereum: {
+              chainId: "0x2105", // Base Mainnet
+              nonce: nonce,
+            },
+          },
+        }],
+      });
+      
+      const address = connectResponse.accounts[0].address;
+      const signature = connectResponse.accounts[0].capabilities.signInWithEthereum.signature;
+      const message = connectResponse.accounts[0].capabilities.signInWithEthereum.message;
+      
+      // Verify signature on backend
+      const verifyResponse = await fetch('/api/auth/verify', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ address, message, signature }),
+      });
+      
+      const { success } = await verifyResponse.json();
+      if (success) {
+        resolve(address);
+      } else {
+        reject(new Error('Signature verification failed'));
+      }
+      */
+    }
+    
+    function skipAuth() {
+      closeAuthModal();
+      
+      // Allow action to proceed in read-only mode
+      if (AppState.user.pendingAction) {
+        const action = AppState.user.pendingAction;
+        console.log('Action skipped (read-only mode):', action.type);
+        
+        // Show message that action requires auth
+        alert(`${action.description} requires signing in. Continuing in read-only mode.`);
+        
+        AppState.user.pendingAction = null;
+      }
+    }
+    
+    function executePendingAction() {
+      if (!AppState.user.pendingAction) return;
+      
+      const action = AppState.user.pendingAction;
+      
+      switch (action.type) {
+        case 'create-waitlist':
+          // Redirect to launch dashboard or open waitlist creation
+          console.log('Executing: Create waitlist');
+          // window.location.href = '#launch';
+          break;
+        case 'share-farcaster':
+          // Open share modal
+          console.log('Executing: Share to Farcaster');
+          // openShareModal();
+          break;
+        default:
+          console.log('Executing pending action:', action.type);
+      }
+      
+      // Clear pending action
+      AppState.user.pendingAction = null;
+    }
+    
+    function updateWalletDisplay() {
+      // Update wallet address in navigation if connected
+      const walletEl = document.querySelector('.wallet-address span');
+      if (walletEl && AppState.user.address) {
+        const truncated = `${AppState.user.address.slice(0, 6)}...${AppState.user.address.slice(-4)}`;
+        walletEl.textContent = truncated;
+      }
+    }
+    
+    // Protected action wrappers
+    function handleCreateWaitlist() {
+      if (!requireAuth('create-waitlist', 'Creating a waitlist')) {
+        return;
+      }
+      
+      // Proceed with waitlist creation
+      console.log('Creating waitlist...');
+      // window.location.href = '#launch';
+    }
+    
+    function handleShareToFarcaster() {
+      if (!requireAuth('share-farcaster', 'Sharing to Farcaster')) {
+        return;
+      }
+      
+      // Proceed with Farcaster share
+      console.log('Opening Farcaster share modal...');
+      // openShareModal();
+    }
+    
+    // Close modal when clicking overlay
+    document.addEventListener('click', (e) => {
+      const modal = document.getElementById('auth-modal');
+      if (e.target === modal) {
+        closeAuthModal();
+      }
+    });
+
+    // Initialize on DOM load
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      init();
+    }
+  </script>
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..818d1c09
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "demos",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}
diff --git a/scratchpad.md b/scratchpad.md
new file mode 100644
index 00000000..408333a5
--- /dev/null
+++ b/scratchpad.md
@@ -0,0 +1,70 @@
+# Project: BaseLaunch
+
+[PLANNER READ COMPLETE - 2025-12-05T00:00:00Z]
+[EXECUTOR READ COMPLETE - 2025-12-05T00:15:00Z]
+
+## Background and Motivation
+
+BaseLaunch is a production-ready Base mini app (Frames v2) for discovering and distributing Base ecosystem apps. It must be mobile-first with Coinbase Base aesthetic, deliver value before auth, and meet strict standards (WCAG 2.1 AA, Lighthouse 90+, <1.5s initial load, no local/session storage). Users browse 50 curated apps, search/filter, open detail modals, share to Farcaster, preview weekly digest emails, and developers manage a waitlist wizard with referral/milestone features. Auth (SIWF) and wallet connections are progressive and non-blocking, defaulting to Base Account but offering alternatives.
+
+## Key Challenges and Analysis
+
+- Experience gating: Must show discovery feed instantly without auth; SIWF triggers only on protected actions (save, share, dashboard saves). Wallet connect only when required for onchain actions; Base Account default with alternatives.
+- Performance: Meet <1.5s FCP and <500KB initial bundle; need SSR/edge rendering, lazy data slices, IntersectionObserver card reveals, debounced search, optimized images, and minimal JS on initial view.
+- Accessibility: WCAG 2.1 AA, keyboard/focus management, ARIA labels, focus traps in modals, visible focus indicators, color contrast for both light/dark modes.
+- State/data: 50 static app objects (id, name, category, metrics, tags, URLs). Derived views for search/filter/trending badges; avoid localStorage; prefer server data or in-memory state per session.
+- UI system: Shared design tokens for light/dark palettes, spacing, typography, motion tokens (ease, durations). Card layout, modals, wizard, share modal, digest preview must adhere to Base aesthetic and animation standards (GPU-friendly transforms/opacity).
+- Frames/Farcaster: Need frames manifest (`/frames.json` or `/.well-known/farcaster.json`), home/preview images, button title, webhook URL placeholder. Must avoid auth walls in frame experience.
+- Security: HTTPS-only assumptions, CSP headers, no API keys client-side, sanitize any user text (e.g., share/digest inputs), no storage of sensitive data.
+- Testing/TDD: Every feature requires tests first (component/render, accessibility behaviors, state logic). Plan for Jest/React Testing Library (or Next testing setup) with jsdom, plus lint/type checks.
+
+## High-level Task Breakdown
+
+- [ ] Task 1: Choose base template and project scaffolding (Next.js app router + TypeScript + Tailwind/OnchainKit/MiniKit as needed); establish lint/test tooling.
+  - Success Criteria: Project boots locally (`npm run dev`), lint/test commands exist and run; app router layout with global styles and design tokens ready.
+- [ ] Task 2: Establish design system (tokens for colors, typography, spacing, radii, motion; light/dark mode support).
+  - Success Criteria: Theme provider or CSS variables in place; global styles apply Base palette; dark/light toggle works; contrast meets WCAG.
+- [ ] Task 3: Seed data and domain models for 50 apps.
+  - Success Criteria: App schema implemented; static dataset loaded server-side; utilities for search/filter/trending scoring with tests.
+- [ ] Task 4: Discovery feed with search/filter.
+  - Success Criteria: Grid/list renders 50 apps with lazy reveal animations, category chips, debounce search, result count; keyboard and screen reader accessible; no auth required.
+- [ ] Task 5: App detail modal with accessibility.
+  - Success Criteria: Modal shows full details (metrics, developer info, actions), focus trap, ESC/overlay close, returns focus, responsive layout, tests cover open/close/focus management.
+- [ ] Task 6: Save/share interactions with progressive auth (SIWF).
+  - Success Criteria: “Save” toggle gated by SIWF modal; guest browsing unaffected; SIWF uses `@farcaster/auth-kit` placeholder wiring; clear copy explaining benefit; tests ensure auth not prompted on load.
+- [ ] Task 7: Developer dashboard waitlist wizard (5 steps).
+  - Success Criteria: Stepper with validation, referral config, milestones/badges, launch date picker with live countdown, referral link + QR, copy-to-clipboard toast, milestone progress/confetti hook; tests for step navigation and validation.
+- [ ] Task 8: Share-to-Farcaster modal.
+  - Success Criteria: Four templates, radio selection, editable textarea with counter and emoji shortcuts, hashtag toggle, preview/copy actions; tests for char limits and state.
+- [ ] Task 9: Weekly digest email preview.
+  - Success Criteria: Frequency + category checkboxes + toggles, live preview rendering all sections, respects choices; tests ensure selections reflect in preview.
+- [ ] Task 10: Frame manifest + routing + performance/accessibility hardening.
+  - Success Criteria: `frames.json` (and/or `/.well-known/farcaster.json`) present with required fields; meta tags for OG and frame; CSP headers configured; Lighthouse/perf budgets documented; no console errors; keyboard navigation verified.
+
+## Current Status / Progress Tracking
+
+- Mode: Executor
+- Current focus: Task 1 (scaffold Next.js app-router + TS + Tailwind with lint/test tooling) pending workspace location/package-manager confirmation.
+
+## Project Status Board
+
+- [ ] Task 1: Scaffold Next.js app router + TS + Tailwind with lint/test tooling
+  - [ ] Test written: scaffold smoke (app renders home, lint/test commands wired)
+  - [ ] Implementation complete
+  - [ ] Test passed
+  - [ ] Planner verified: [ ]
+
+## Executor's Feedback or Assistance Requests
+
+- Need confirmation on scaffold location and package manager before proceeding:
+  - Preferred directory name (e.g., `baselaunch-app` or reuse/replace existing `baselaunch/` static site?)
+  - Package manager: npm vs pnpm vs yarn?
+  - Any required SDKs preinstalled (OnchainKit/MiniKit/AuthKit) for initial scaffold or add later?
+
+## Lessons
+
+- To record best practices and pitfalls as they arise.
+
+## External Data Log
+
+- Spec source: BaseLaunch complete specification provided by user.