[TASK]: Rebuild Docs Homepage as Customer-Facing Enterprise CRM Product Website (replace developer-oriented layout)

[hotlong]

[TASK]: Rebuild Docs Homepage as a Customer-Facing Enterprise CRM Product Website

Context & Problem

Issue #235 / PR #236 redesigned the docs landing page, but the result is still a developer-oriented documentation site, not a customer-facing enterprise CRM product website. The current page targets engineers (terminal commands, code blocks, tech stack logos, "Star on GitHub" CTAs) while HotCRM's actual audience is business decision-makers — VP Sales, CIOs, operations leaders — who evaluate CRM platforms.

Compared to Salesforce / HubSpot / Zoho / monday.com, the current homepage is missing almost every standard enterprise SaaS landing page element.

Current Problems (Detailed)

1. Hero Section — Developer tool, not enterprise product

• Shows npx create-hotcrm@latest terminal window instead of product UI screenshots / dashboard demo
• CTA buttons are "Get Started" (→ docs) and "View on GitHub" — enterprise buyers want "Free Trial" / "Book a Demo"

2. Trust Block — Tech stack names, not customer trust signals

• Displays TypeScript, React 19, Next.js 16, Zod 4, Pino, Vitest as plain gray text
• Should be: Customer logos, industry awards, "Trusted by XX,XXX+ businesses"

3. Value Proposition — Technical concepts, not business outcomes

• Current: "Metadata-Driven" / "Agentic AI" / "Developer First"
• Should be: "Increase sales conversion by XX%" / "Reduce customer churn" / "Automate XX hours of manual work per week"

4. Code Block Section — TypeScript code visible to non-technical users

• opportunity.object.ts with raw TypeScript syntax highlighting
• Enterprise customers don't want to see ObjectSchema.create({...})
• Should be: Product screenshots, interactive demo, or feature walkthrough with business context

5. Solutions Grid — One-line descriptions with zero depth

• salesDesc: 'Leads, Opportunities, and Deals.' — 7 words
• serviceDesc: 'Cases, Knowledge, and SLA tracking.' — 6 words
• Compare to Salesforce Sales Cloud page: paragraphs of scenario-based copy with screenshots, customer quotes, and data points

6. Stats — Internal engineering metrics

• 148 Business Objects / 121 Server Hooks / 3,813 Tests Passing / 13 Business Packages
• Customers don't care about hooks or test counts
• Should be: Customer count, efficiency improvements, industry coverage, revenue growth data

7. CTA — "Read the Docs" / "Star on GitHub"

• Zero conversion intent for enterprise buyers
• Should be: "Start Free Trial" / "Talk to Sales" / "Book a Demo"

8. Missing Sections (standard on every enterprise CRM site)

• ❌ Product UI screenshots / video / interactive demo
• ❌ Customer case studies / testimonials
• ❌ Customer logo wall
• ❌ Industry solutions (by vertical: Tech / Finance / Retail / Manufacturing...)
• ❌ Role-based solutions (VP Sales / CMO / IT Admin)
• ❌ Pricing / plans entry point
• ❌ Integration ecosystem / App Marketplace
• ❌ Security & compliance (SOC 2 / GDPR / data isolation)
• ❌ Blog / Resource center entry

Technical Specifications

Files to modify:

• apps/docs/app/[locale]/page.tsx — Full page restructure
• apps/docs/app/global.css — Updated styles for new sections
• apps/docs/lib/dictionaries/en.ts — Complete rewrite of home section copy
• apps/docs/lib/dictionaries/zh.ts — Complete rewrite of home section copy (Chinese)

New page structure (targeting Salesforce / HubSpot 2025 standard):

 1. Hero Section
    - Business-focused headline (not "Enterprise Power. Start-up Speed.")
    - Subtitle in customer language (not "metadata-driven rigor meets agentic AI flexibility")
    - Primary CTA: "Start Free Trial" / "Book a Demo"
    - Secondary CTA: "Watch Product Tour"
    - Hero visual: Product dashboard screenshot or video (not terminal window)

 2. Customer Logo Wall
    - "Trusted by XX,XXX+ businesses worldwide"
    - Grid of recognizable customer/partner logos
    - If no real customers yet, use industry logos or "Built for enterprises in..."

 3. Business Value Proposition (3-4 cards)
    - Frame around outcomes: revenue growth, efficiency, customer satisfaction
    - Each card: icon + metric + business description
    - Example: "37% faster deal closure" / "60% reduction in manual data entry"

 4. Product Showcase (per Cloud, with visuals)
    - Each cloud gets a rich section with:
      - Scenario-based headline (not "Sales Cloud")
      - 2-3 paragraph description in business language
      - Product screenshot or animated GIF
      - 3-4 key capability bullet points
      - "Learn More →" link to dedicated product page
    - Alternate left/right layout for visual rhythm

 5. AI Differentiator Section
    - Explain AI in business terms: "Your AI sales assistant that never sleeps"
    - Show concrete scenarios: auto-drafted follow-up emails, smart lead scoring, predictive forecasting
    - Visual: before/after or workflow diagram

 6. Customer Testimonials / Case Studies
    - 2-3 customer quotes with name, title, company
    - Metric callouts: "Increased pipeline by 3x in 6 months"
    - If no real testimonials yet, use placeholder structure

 7. Industry Solutions
    - Grid: Technology / Financial Services / Retail / Manufacturing / Healthcare / Professional Services
    - Each with icon + brief scenario description

 8. Integration Ecosystem
    - "Connect with the tools you already use"
    - Logo grid: Slack, Gmail, Outlook, Zapier, etc.

 9. Security & Compliance
    - SOC 2 / GDPR / Role-based access / Data encryption
    - Enterprise-grade trust signals

10. Pricing Entry Point
    - Brief overview of plans or "See Pricing →" link

11. Final CTA
    - "Ready to transform your customer relationships?"
    - "Start Free Trial" (primary) + "Talk to Sales" (secondary)
    - NOT "Read the Docs" / "Star on GitHub"

Copy rewrite guidelines:

• Zero technical jargon visible to end users (no ObjectStack, metadata, hooks, TypeScript, ObjectQL)
• Every sentence answers "what's in it for the customer?"
• Use quantified benefits where possible
• Professional but warm tone — not marketing hype, not developer docs
• Top CTA and bottom CTA must be differentiated in copy but both conversion-focused

Visual / interaction requirements:

• Product screenshots or mockups as hero visual (replace terminal window)
• Smooth scroll-triggered animations (fade-in, slide-up)
• Responsive: mobile-first, beautiful on all breakpoints
• Dark/light mode support maintained
• Customer logo wall with grayscale → color on hover

Acceptance Criteria

• Homepage completely repositioned for enterprise customers, not developers
• All copy rewritten in business language (both en.ts and zh.ts)
• Product screenshots or placeholder visuals replace code blocks
• CTAs changed to "Free Trial" / "Book a Demo" / "Talk to Sales"
• Trust block shows customer logos (or placeholder structure)
• Stats show business metrics instead of engineering metrics
• At least placeholder sections for: testimonials, industry solutions, integrations, security
• Beautiful in both dark and light mode
• Mobile responsive
• All related tests pass
• ROADMAP.md updated

Reference Sites

• https://www.salesforce.com
• https://www.hubspot.com
• https://monday.com
• https://www.zoho.com/crm
• https://www.freshworks.com/crm