Transform docs homepage from developer docs to customer-facing enterprise CRM website#247
Merged
Transform docs homepage from developer docs to customer-facing enterprise CRM website#247
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Claude
AI
changed the title
There was a problem hiding this comment.
Pull request overview
Rebuilds the docs homepage (apps/docs/app/[locale]/page.tsx) into a customer-facing, conversion-oriented marketing page, replacing developer-focused content with business outcomes and new sections, and updating bilingual copy and styling accordingly.
Changes:
- Reworked homepage layout: hero, customer logo wall, value props, product showcase, AI section, testimonials, industry solutions, integrations, security, stats, pricing entry, and final CTA.
- Replaced homepage copy in English/Chinese dictionaries with business-focused messaging and new section strings.
- Updated global CSS to support new hover effects, cards, and animation utilities; updated ROADMAP to mark completion.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/docs/app/[locale]/page.tsx | Major homepage restructure with new sections/cards and updated CTA/UI wiring |
| apps/docs/lib/dictionaries/en.ts | Business-focused English homepage copy + new keys for added sections |
| apps/docs/lib/dictionaries/zh.ts | Chinese mirror translation for the updated homepage copy + new keys |
| apps/docs/app/global.css | New styles for product showcase, logo wall, cards, integrations, and animation utilities |
| ROADMAP.md | Marks the homepage transformation as completed |
Comments suppressed due to low confidence (1)
apps/docs/app/[locale]/page.tsx:387
- Final CTA labels have been changed (e.g., “Start Free Trial”, “Talk to Sales”) but the links still go to /docs and GitHub. Update these hrefs to the corresponding conversion routes, and add a safe rel attribute on the external link when using target="_blank".
<Link
href="/docs/getting-started/introduction"
className="inline-flex h-12 items-center justify-center rounded-lg bg-foreground text-background px-8 text-base font-medium transition-all hover:bg-foreground/90 hover:shadow-lg"
>
{dict.home.readDocs}
<ArrowRight className="ml-2 w-5 h-5" />
</Link>
<Link
href="https://github.com/objectstack-ai/hotcrm"
target="_blank"
className="inline-flex h-12 items-center justify-center rounded-lg border border-border bg-background/50 backdrop-blur-sm px-8 text-base font-medium shadow-sm transition-all hover:bg-accent hover:text-accent-foreground"
>
{dict.home.starOnGithub}
</Link>
Comment on lines
+98
to
+103
| { name: 'Technology', icon: <Globe className="w-8 h-8" /> }, | ||
| { name: 'Finance', icon: <Building2 className="w-8 h-8" /> }, | ||
| { name: 'Retail', icon: <ShoppingCart className="w-8 h-8" /> }, | ||
| { name: 'Manufacturing', icon: <Factory className="w-8 h-8" /> }, | ||
| { name: 'Healthcare', icon: <HeartPulse className="w-8 h-8" /> }, | ||
| { name: 'Services', icon: <Briefcase className="w-8 h-8" /> }, |
There was a problem hiding this comment.
Customer logo wall labels (e.g., “Technology”, “Finance”, etc.) are hardcoded English strings. Since this route is locale-scoped, these should come from the dictionary (you already have industry* keys for the Industry section).
Suggested change
| { name: 'Technology', icon: <Globe className="w-8 h-8" /> }, | |
| { name: 'Finance', icon: <Building2 className="w-8 h-8" /> }, | |
| { name: 'Retail', icon: <ShoppingCart className="w-8 h-8" /> }, | |
| { name: 'Manufacturing', icon: <Factory className="w-8 h-8" /> }, | |
| { name: 'Healthcare', icon: <HeartPulse className="w-8 h-8" /> }, | |
| { name: 'Services', icon: <Briefcase className="w-8 h-8" /> }, | |
| { name: dict.home.industryTechnology, icon: <Globe className="w-8 h-8" /> }, | |
| { name: dict.home.industryFinance, icon: <Building2 className="w-8 h-8" /> }, | |
| { name: dict.home.industryRetail, icon: <ShoppingCart className="w-8 h-8" /> }, | |
| { name: dict.home.industryManufacturing, icon: <Factory className="w-8 h-8" /> }, | |
| { name: dict.home.industryHealthcare, icon: <HeartPulse className="w-8 h-8" /> }, | |
| { name: dict.home.industryServices, icon: <Briefcase className="w-8 h-8" /> }, |
Comment on lines
+308
to
+313
| { name: 'Email', icon: <Mail className="w-8 h-8" /> }, | ||
| { name: 'Chat', icon: <MessageSquare className="w-8 h-8" /> }, | ||
| { name: 'Calendar', icon: <Calendar className="w-8 h-8" /> }, | ||
| { name: 'Docs', icon: <FileText className="w-8 h-8" /> }, | ||
| { name: 'CRM', icon: <Users className="w-8 h-8" /> }, | ||
| { name: 'API', icon: <Zap className="w-8 h-8" /> }, |
There was a problem hiding this comment.
Integration names (“Email”, “Chat”, etc.) are hardcoded English, so they won’t be localized on /zh. Consider moving these labels into the dictionaries (or mapping from dict) to keep i18n consistent.
Suggested change
| { name: 'Email', icon: <Mail className="w-8 h-8" /> }, | |
| { name: 'Chat', icon: <MessageSquare className="w-8 h-8" /> }, | |
| { name: 'Calendar', icon: <Calendar className="w-8 h-8" /> }, | |
| { name: 'Docs', icon: <FileText className="w-8 h-8" /> }, | |
| { name: 'CRM', icon: <Users className="w-8 h-8" /> }, | |
| { name: 'API', icon: <Zap className="w-8 h-8" /> }, | |
| { name: dict.home.integrationEmail, icon: <Mail className="w-8 h-8" /> }, | |
| { name: dict.home.integrationChat, icon: <MessageSquare className="w-8 h-8" /> }, | |
| { name: dict.home.integrationCalendar, icon: <Calendar className="w-8 h-8" /> }, | |
| { name: dict.home.integrationDocs, icon: <FileText className="w-8 h-8" /> }, | |
| { name: dict.home.integrationCrm, icon: <Users className="w-8 h-8" /> }, | |
| { name: dict.home.integrationApi, icon: <Zap className="w-8 h-8" /> }, |
Comment on lines
+357
to
+363
| <Link | ||
| href={`/${locale}/docs/getting-started/introduction`} | ||
| className="inline-flex h-11 items-center justify-center rounded-lg border border-border bg-background px-6 text-sm font-medium transition-all hover:bg-accent hover:text-accent-foreground" | ||
| > | ||
| {dict.home.pricingCta} | ||
| <ArrowRight className="ml-2 w-4 h-4" /> | ||
| </Link> |
There was a problem hiding this comment.
The Pricing CTA link is built as /${locale}/docs/..., but docs routes appear to live at /docs/... (no locale prefix). This will likely 404 for /en and /zh. Also, the label is “View Pricing Plans” but the destination is the getting-started docs, which doesn’t match the CTA intent.
Comment on lines
63
to
69
| <Link | ||
| href="https://github.com/objectstack-ai/hotcrm" | ||
| target="_blank" | ||
| className="inline-flex h-12 items-center justify-center rounded-lg border border-border bg-background/50 backdrop-blur-sm px-8 text-base font-medium shadow-sm transition-all hover:bg-accent hover:text-accent-foreground" | ||
| > | ||
| <GitBranch className="mr-2 w-5 h-5" /> | ||
| {dict.home.viewOnGithub} | ||
| </Link> |
There was a problem hiding this comment.
This external link opens in a new tab (target="_blank") but is missing a rel="noopener noreferrer" (or equivalent). Add rel to prevent reverse-tabnabbing.
Comment on lines
65
to
69
| target="_blank" | ||
| className="inline-flex h-12 items-center justify-center rounded-lg border border-border bg-background/50 backdrop-blur-sm px-8 text-base font-medium shadow-sm transition-all hover:bg-accent hover:text-accent-foreground" | ||
| > | ||
| <GitBranch className="mr-2 w-5 h-5" /> | ||
| {dict.home.viewOnGithub} | ||
| </Link> |
There was a problem hiding this comment.
Hero CTAs have been repurposed (“Start Free Trial” / “Book a Demo”), but the destinations are still docs intro and GitHub. Update these hrefs to the actual trial + demo booking routes (or revert the CTA copy) so the actions match where users land.
| { name: 'CRM', icon: <Users className="w-8 h-8" /> }, | ||
| { name: 'API', icon: <Zap className="w-8 h-8" /> }, | ||
| ].map(integration => ( | ||
| <div key={integration.name} className="integration-item flex flex-col items-center gap-2 text-muted-foreground/60 hover:text-primary transition-colors cursor-pointer"> |
There was a problem hiding this comment.
These integration tiles use cursor-pointer but are rendered as non-interactive
elements with no link/button behavior. Either remove cursor-pointer or make them real links/buttons so they are accessible via keyboard and correctly announced to assistive tech.
Suggested change
| <div key={integration.name} className="integration-item flex flex-col items-center gap-2 text-muted-foreground/60 hover:text-primary transition-colors cursor-pointer"> | |
| <div key={integration.name} className="integration-item flex flex-col items-center gap-2 text-muted-foreground/60 hover:text-primary transition-colors"> |
| GitBranch, TestTube, Blocks, Cpu, Terminal, Zap, Lock, Globe, | ||
| ArrowRight, Bot, TrendingUp, Users, Shield, Zap, Globe, Target, | ||
| LifeBuoy, Megaphone, Banknote, LayoutTemplate, CheckCircle2, | ||
| Building2, Briefcase, ShoppingCart, Factory, HeartPulse, Lightbulb, |
There was a problem hiding this comment.
Lightbulb is imported from lucide-react but not used anywhere in this file. Removing it avoids dead imports and keeps the icon list maintainable.
Suggested change
| Building2, Briefcase, ShoppingCart, Factory, HeartPulse, Lightbulb, | |
| Building2, Briefcase, ShoppingCart, Factory, HeartPulse, |
Comment on lines
426
to
439
| function SolutionCard({ icon, title, description, href, cta }: { icon: React.ReactNode; title: string; description: string; href: string; cta: string }) { | ||
| return ( | ||
| <Link href={href} className="group block"> | ||
| <div className="flex items-start gap-4 rounded-xl border border-border/60 bg-card p-5 transition-all hover:border-primary/40 hover:shadow-md hover:bg-accent/30"> | ||
| <div className="w-10 h-10 rounded-lg bg-primary/10 flex shrink-0 items-center justify-center text-primary group-hover:bg-primary/15 transition-colors"> | ||
| <div className="flex flex-col gap-4 rounded-xl border border-border/60 bg-card p-6 transition-all hover:border-primary/40 hover:shadow-md hover:bg-accent/30 h-full"> | ||
| <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary/15 transition-colors"> | ||
| {icon} | ||
| </div> | ||
| <div className="min-w-0"> | ||
| <h3 className="font-semibold mb-1 flex items-center gap-1"> | ||
| <div className="flex-1"> | ||
| <h3 className="font-semibold text-lg mb-2 flex items-center gap-1"> | ||
| {title} | ||
| <ArrowRight className="w-3.5 h-3.5 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all text-primary" /> | ||
| <ArrowRight className="w-4 h-4 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all text-primary" /> | ||
| </h3> | ||
| <p className="text-sm text-muted-foreground">{description}</p> | ||
| <p className="text-sm text-muted-foreground leading-relaxed">{description}</p> | ||
| </div> |
There was a problem hiding this comment.
SolutionCard accepts a cta prop (and callers pass it) but the component never renders it. Either render the CTA text somewhere in the card or remove the prop from both the call sites and the component signature to avoid misleading API surface.
| <div className="aspect-video bg-muted/30 rounded-lg border border-border/40 flex items-center justify-center"> | ||
| <div className="text-center"> | ||
| <TrendingUp className="w-16 h-16 mx-auto mb-4 text-primary/40" /> | ||
| <p className="text-sm text-muted-foreground">Product Dashboard Preview</p> |
There was a problem hiding this comment.
The “Product Dashboard Preview” placeholder text is hardcoded in English, so it will show on /zh as well. Please move this string into the locale dictionary (or derive it from existing dict.home keys) to keep the homepage fully bilingual.
Suggested change
| <p className="text-sm text-muted-foreground">Product Dashboard Preview</p> | |
| <p className="text-sm text-muted-foreground">{dict.home.subtitle}</p> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Completely rebuilt the docs homepage to target enterprise decision-makers (VP Sales, CIOs, operations leaders) instead of developers. Replaced technical content with business value propositions, customer proof points, and conversion-focused CTAs.
Type of Change
Related Issues
Fixes #245
Changes Made
Content Transformation
New Sections Added (11 total)
Localization
lib/dictionaries/en.ts): +127 lines of business-focused copylib/dictionaries/zh.ts): Complete mirror translation maintaining professional toneVisual Enhancements
app/global.css): Added hover effects for customer logos, testimonials, integrations, product showcaseComponent Architecture
Created 8 new sub-components:
ValueCard- Business value propositions with metricsFeatureCard- Product capabilitiesSolutionCard- Cloud solution cards with full descriptionsAIFeatureCard- AI feature highlightsTestimonialCard- Customer testimonials with avatarsIndustryCard- Industry-specific solutionsSecurityBadge- Trust badgesStatItem- Customer statistics (reused existing)Testing
pnpm build- 296 pages generated)Checklist
Additional Notes
Files modified:
apps/docs/app/[locale]/page.tsx- Complete page restructure (511 lines)apps/docs/lib/dictionaries/en.ts- +127 lines business copyapps/docs/lib/dictionaries/zh.ts- +127 lines Chinese copyapps/docs/app/global.css- +36 lines stylingROADMAP.md- Documented completion in Phase 15Zero technical jargon visible to end users. All ObjectStack/TypeScript/metadata terminology removed from customer-facing content. Now targets business outcomes, customer proof points, and conversion paths matching Salesforce/HubSpot/monday.com standards.
Original prompt
This section details on the original issue you should resolve
<issue_title>[TASK]: Rebuild Docs Homepage as Customer-Facing Enterprise CRM Product Website (replace developer-oriented layout)</issue_title>
<issue_description>## [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
npx create-hotcrm@latestterminal window instead of product UI screenshots / dashboard demo2. Trust Block — Tech stack names, not customer trust signals
TypeScript, React 19, Next.js 16, Zod 4, Pino, Vitestas plain gray text3. Value Proposition — Technical concepts, not business outcomes
4. Code Block Section — TypeScript code visible to non-technical users
opportunity.object.tswith raw TypeScript syntax highlightingObjectSchema.create({...})5. Solutions Grid — One-line descriptions with zero depth
salesDesc: 'Leads, Opportunities, and Deals.'— 7 wordsserviceDesc: 'Cases, Knowledge, and SLA tracking.'— 6 words6. Stats — Internal engineering metrics
7. CTA — "Read the Docs" / "Star on GitHub"
8. Missing Sections (standard on every enterprise CRM site)
Technical Specifications
Files to modify:
apps/docs/app/[locale]/page.tsx— Full page restructureapps/docs/app/global.css— Updated styles for new sectionsapps/docs/lib/dictionaries/en.ts— Complete rewrite ofhomesection copyapps/docs/lib/dictionaries/zh.ts— Complete rewrite ofhomesection copy (Chinese)New page structure (targeting Salesforce / HubSpot 2025 standard):