# Otto AI Homepage Redesign - Web3 Specialists ONLY ## READ CAREFULLY - Strict Requirements ### About Otto AI (Important Context) **Otto is an AI-powered DeFi intelligence platform, NOT just a wallet.** - **Primary focus:** AI agents for market intelligence, trading analysis, and DeFi automation - **The brand:** Otto the Otter (our AI mascot) - **Domain:** ottowallet.xyz (historical reasons, but we're Otto AI) - **Core offering:** AI Co-Pilot, Agent Swarm, conversational DeFi tools **Critical:** This is NOT a "wallet app redesign" — it's an **AI-first DeFi intelligence platform** homepage. The design must communicate cutting-edge AI + Web3, not just another wallet. ### MANDATORY Web3 Portfolio Requirement Your proposal will be IMMEDIATELY REJECTED if you don't include: 1. **Direct links to 2-3 live Web3/crypto homepages you designed** - Must be actual crypto/DeFi/Web3 projects (wallets, protocols, DEXs, AI agents) - NO portfolios with only logo designs, branding, or traditional websites - We will verify each link 2. **Mention 3 specific ReactBits components you plan to use** - Visit https://reactbits.dev/ BEFORE applying - Example: "I will use the Animated Beam component for AI connections, Ripple Button for CTAs, and Marquee for partner logos" 3. **Screenshots from your proposal showing Web3 UI work** - We want to see dark mode, glass morphism, modern crypto aesthetics - Examples: Phantom Wallet, Rainbow, Uniswap, Base.org, Magic Eden, Virtuals.io ### What We're Building This is a **HOMEPAGE/LANDING PAGE VISUAL REDESIGN** for Otto AI. **Current site:** https://ottowallet.xyz (VIEW THIS FIRST) **Important Notes:** - **Content/messaging is solid** — we're keeping most copy and sections - **Structure is good** — hero, features, agent swarm, architecture, token, community - **Visual design needs modernization** — make it STUNNING and futuristic - **Better visual hierarchy** — guide the eye, improve flow - **More dynamic/engaging** — animations, micro-interactions, visual interest **Your job:** Take our existing content and make it look like a top-tier Web3 AI platform (think Virtuals.io, Base.org, or Worldcoin level design quality) ### Technical Stack (You Must Be Familiar) - **Next.js 15** (React framework) - **TypeScript** (strongly typed) - **Tailwind CSS** (utility-first CSS) - **Framer Motion** (animations) - **ReactBits components** (MANDATORY - https://reactbits.dev/) ### Design Aesthetic (This is Critical) We want the EXACT aesthetic of modern Web3 AI platforms: **YES - What We Want:** - Dark mode - Sleek, minimalist, futuristic - **AI-themed visuals** (neural networks, beams, particles, glows) - Glass morphism effects with depth - Subtle gradients (blues, purples, cyans) - Smooth micro-interactions and animations - Clean typography with great hierarchy - Spacious layouts, not cluttered - **Examples: Virtuals.io, Base.org, Worldcoin, Farcaster, Rainbow Wallet, Zora** **NO - What We Don't Want:** - Corporate/traditional finance look - Generic wallet app aesthetic - Bright colors or busy layouts - Generic SaaS landing page style - Cluttered sections - Looks like "just another crypto wallet" ### Key Messaging to Emphasize Visually Since this is **Otto AI** (not just a wallet), the design must communicate: 1. **AI-First:** This is an intelligent system, not passive software 2. **Agent Swarm:** Multiple AI agents working together 3. **Conversational:** Natural language interface 4. **Cutting-Edge:** Futuristic, advanced technology 5. **Trustworthy:** Enterprise-grade, secure, legitimate ### Current Sections (Keep These, Redesign Visually) **Current structure we like:** 1. **Hero Section** - "Meet Otto" typewriter animation - Action text carousel ("Send. Swap. Bridge...") - "Speak with Otto" CTA - Partner/chain ticker 2. **Otto AI Co-Pilot Section** - Quick prompt categories - Interactive prompt cards - Chat input preview 3. **Agent Swarm Section** - 3 agent categories (Market Alpha, News & Social, AI Tools) - Protocol integration info (ACP, x402) 4. **Architecture Section** - Diagram of tech stack - 3 pillars (AI Intelligence, DeFi Protocols, Security) 5. **$OTTO Token Section** - Token info and contract address - Links to GeckoTerminal, Virtuals 6. **Community Section** - Points program CTA - Social links (Twitter, Telegram) - DeFi 101 Library link 7. **Final CTA Section** - Multiple CTAs (Twitter interaction, Speak with Otto, Docs) 8. **Footer** - Social icons - Version/changelog - T&Cs **Your task:** Keep these sections and content, but make them visually STUNNING. ### What We'll Provide You Once selected, you'll get: - Current homepage code structure (for reference) - All brand assets (Otto logo, partner logos, colors, fonts) - Detailed content/copy for each section - List of ReactBits components we want to see - Competitor sites we admire with annotations ### Deliverables Required **You MUST provide:** 1. **Figma Design File** including: - Desktop (1920x1080, 1440x900) - Tablet (768px width) - Mobile (375px width) - **Component annotations** showing which ReactBits components to use for each element - All assets exported as SVGs/PNGs - Interactive prototype showing transitions/animations - **Organized layers** (developers need to extract specs easily) 2. **Design Specifications Document** - Typography scale (font sizes, weights, line heights) - Color palette with hex/RGB codes - Spacing system (margins, paddings, gaps) - Component specifications - Animation timing/easing specs 3. **Animation Guide** - Describe all animations/transitions - Timing (e.g., "fade in over 0.6s with ease-out") - Triggers (on scroll, on hover, on load) - Examples or video recordings of animation intent 4. **Asset Package** - All SVGs, icons, illustrations - Optimized for web - Properly named files ### Your Proposal MUST Include **Copy/paste this checklist and fill it out:** [ ] I have visited ottowallet.xyz and reviewed the current design [ ] I understand this is an AI-first platform, not just a wallet [ ] I have visited reactbits.dev and reviewed the components [ ] The 3 ReactBits components I plan to use are: 1. [Component Name] - for [purpose/location] 2. [Component Name] - for [purpose/location] 3. [Component Name] - for [purpose/location] [ ] Live Web3 homepage links I designed: 1. [URL] - [Project name and your role] 2. [URL] - [Project name and your role] 3. [URL] - [Project name and your role] [ ] I have attached screenshots of Web3 UI work in my proposal [ ] I can deliver developer-friendly Figma with clear specs [ ] My timeline: [X days/weeks] [ ] My fixed price: $[amount] ### Questions to Answer in Proposal 1. **Which Web3 AI/crypto homepage is your favorite design and why?** 2. **What's your process for ensuring Figma files are developer-ready?** 3. **Have you worked with ReactBits or similar component libraries before?** ### Auto-Rejection Criteria Your proposal will be rejected if: - No Web3 portfolio links provided - No mention of specific ReactBits components - Portfolio shows only logos, branding, or non-web work - Generic "I can do this" without addressing requirements - Copy-paste proposal template - Didn't mention visiting ottowallet.xyz --- ## Why This Matters Otto AI is built by an experienced Web3 team and backed by serious technology. We need a designer who understands the AI agent narrative and can create a homepage that makes developers, traders, and crypto natives say "This is the future." Our content tells the story. We need you to make it visually unforgettable. If you're that designer and you have proven Web3 work, we're excited to collaborate.