@@ -14,10 +14,12 @@ import {
1414 Database ,
1515 Settings ,
1616 TestTube ,
17- BarChart3
17+ BarChart3 ,
18+ Cpu
1819} from 'lucide-react' ;
1920import { useTranslation } from 'react-i18next' ;
2021import { FLUXMQ_DOC_INSTALL_CATEGORY_URL , FLUXMQ_DOC_DEMOS_URL } from '@/lib/constants' ;
22+ import { getHomepageLocale , homepageContent } from '@/lib/homepageContent' ;
2123
2224interface DocSection {
2325 id : string ;
@@ -30,8 +32,14 @@ interface DocSection {
3032}
3133
3234const DocumentationPortal : React . FC = ( ) => {
33- const { t } = useTranslation ( ) ;
35+ const { t, i18n } = useTranslation ( ) ;
36+ const locale = getHomepageLocale ( i18n . language ) ;
37+ const home = homepageContent [ locale ] ;
3438 const [ activeSection , setActiveSection ] = useState < string | null > ( null ) ;
39+ const docsSubtitle =
40+ locale === 'zh'
41+ ? '按产品查看文档与资源:Halia 工业接入、FluxMQ 消息服务、FCP 控制平面。'
42+ : 'Browse resources by product: Halia for industrial access, FluxMQ for messaging, and FCP for control plane operations.' ;
3543
3644 const docSections : DocSection [ ] = [
3745 {
@@ -103,18 +111,40 @@ const DocumentationPortal: React.FC = () => {
103111 { t ( 'docs.portal.title' ) }
104112 </ h2 >
105113 < p className = "text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed" >
106- { t ( 'docs.portal.subtitle' ) }
114+ { docsSubtitle }
107115 </ p >
108116 </ div >
109117
110- { /* By product: FluxMQ + FCP */ }
111- < div className = "grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto mb-16" >
118+ { /* By product */ }
119+ < div className = "grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto mb-16" >
120+ < Card
121+ className = "group hover:shadow-card transition-all duration-300 border-border/50 hover:border-primary/50 cursor-pointer overflow-hidden"
122+ onClick = { ( ) => document . getElementById ( 'contact' ) ?. scrollIntoView ( { behavior : 'smooth' } ) }
123+ >
124+ < CardHeader className = "pb-4" >
125+ < div className = "p-3 bg-background/60 border border-border/60 w-fit mb-3" >
126+ < Cpu className = "h-8 w-8 text-primary" />
127+ </ div >
128+ < CardTitle className = "text-2xl group-hover:text-primary transition-colors" >
129+ Halia
130+ </ CardTitle >
131+ < p className = "text-muted-foreground leading-relaxed" >
132+ { home . products . items [ 0 ] . summary }
133+ </ p >
134+ </ CardHeader >
135+ < CardContent className = "pt-0" >
136+ < Button variant = "outline" className = "w-full justify-between group/btn border-primary/50" >
137+ < span > { home . products . items [ 0 ] . cta } </ span >
138+ < ChevronRight className = "h-4 w-4" />
139+ </ Button >
140+ </ CardContent >
141+ </ Card >
112142 < Card
113143 className = "group hover:shadow-card transition-all duration-300 border-border/50 hover:border-primary/50 cursor-pointer overflow-hidden"
114144 onClick = { ( ) => window . open ( 'https://doc.fluxmq.com' , '_blank' ) }
115145 >
116146 < CardHeader className = "pb-4" >
117- < div className = "p-3 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-xl w-fit mb-3" >
147+ < div className = "p-3 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 w-fit mb-3" >
118148 < BookOpen className = "h-8 w-8 text-primary" />
119149 </ div >
120150 < CardTitle className = "text-2xl group-hover:text-primary transition-colors" >
@@ -136,7 +166,7 @@ const DocumentationPortal: React.FC = () => {
136166 onClick = { ( ) => window . open ( 'https://fcp.doc.fluxmq.com' , '_blank' ) }
137167 >
138168 < CardHeader className = "pb-4" >
139- < div className = "p-3 bg-gradient-to-br from-violet -500/20 to-purple -500/20 rounded-xl w-fit mb-3" >
169+ < div className = "p-3 bg-gradient-to-br from-amber -500/20 to-teal -500/20 w-fit mb-3" >
140170 < Settings className = "h-8 w-8 text-primary" />
141171 </ div >
142172 < CardTitle className = "text-2xl group-hover:text-primary transition-colors" >
@@ -197,7 +227,7 @@ const DocumentationPortal: React.FC = () => {
197227 </ div >
198228
199229 { /* Quick Access */ }
200- < div className = "bg-gradient-card rounded-2xl border border-border/50 shadow-card p-8" >
230+ < div className = "bg-gradient-card border border-border/50 shadow-card p-8" >
201231 < div className = "text-center" >
202232 < h3 className = "text-2xl font-bold mb-4" > { t ( 'docs.portal.quickAccess.title' ) } </ h3 >
203233 < p className = "text-muted-foreground mb-6" >
@@ -244,4 +274,4 @@ const DocumentationPortal: React.FC = () => {
244274 ) ;
245275} ;
246276
247- export default DocumentationPortal ;
277+ export default DocumentationPortal ;
0 commit comments