1- import { SITES } from '@next-i18n/const' ;
1+ import { PENDING_SITES , SITES } from '@next-i18n/const' ;
22import Image from 'next/image' ;
33
44// Language metadata with display names and descriptions
@@ -24,10 +24,54 @@ const LANGUAGE_INFO = {
2424 description : 'Next.js 繁體中文文檔' ,
2525 color : 'from-purple-500 to-purple-600' ,
2626 } ,
27+ // Pending languages
28+ ja : {
29+ name : 'Japanese' ,
30+ nativeName : '日本語' ,
31+ flag : '🇯🇵' ,
32+ description : 'Next.js 日本語ドキュメント' ,
33+ color : 'from-pink-500 to-pink-600' ,
34+ } ,
35+ es : {
36+ name : 'Spanish' ,
37+ nativeName : 'Español' ,
38+ flag : '🇪🇸' ,
39+ description : 'Documentación de Next.js en español' ,
40+ color : 'from-amber-500 to-amber-600' ,
41+ } ,
42+ de : {
43+ name : 'German' ,
44+ nativeName : 'Deutsch' ,
45+ flag : '🇩🇪' ,
46+ description : 'Next.js Dokumentation auf Deutsch' ,
47+ color : 'from-gray-500 to-gray-600' ,
48+ } ,
49+ fr : {
50+ name : 'French' ,
51+ nativeName : 'Français' ,
52+ flag : '🇫🇷' ,
53+ description : 'Documentation Next.js en français' ,
54+ color : 'from-indigo-500 to-indigo-600' ,
55+ } ,
56+ ru : {
57+ name : 'Russian' ,
58+ nativeName : 'Русский' ,
59+ flag : '🇷🇺' ,
60+ description : 'Документация Next.js на русском языке' ,
61+ color : 'from-emerald-500 to-emerald-600' ,
62+ } ,
63+ ar : {
64+ name : 'Arabic' ,
65+ nativeName : 'العربية' ,
66+ flag : '🇸🇦' ,
67+ description : 'وثائق Next.js باللغة العربية' ,
68+ color : 'from-green-500 to-green-600' ,
69+ } ,
2770} as const ;
2871
2972export default function Home ( ) {
3073 const siteEntries = Object . entries ( SITES ) ;
74+ const pendingSiteEntries = Object . entries ( PENDING_SITES ) ;
3175 const totalTranslations = siteEntries . length ;
3276
3377 return (
@@ -65,6 +109,12 @@ export default function Home() {
65109 < div className = "w-2 h-2 bg-green-500 rounded-full animate-pulse" />
66110 < span > { totalTranslations } Languages Available</ span >
67111 </ div >
112+ { pendingSiteEntries . length > 0 && (
113+ < div className = "flex items-center gap-2" >
114+ < div className = "w-2 h-2 bg-orange-500 rounded-full animate-pulse" />
115+ < span > { pendingSiteEntries . length } More Coming Soon</ span >
116+ </ div >
117+ ) }
68118 < div className = "flex items-center gap-2" >
69119 < Image
70120 src = "/globe.svg"
@@ -159,6 +209,103 @@ export default function Home() {
159209 </ div >
160210 </ div >
161211
212+ { /* Pending Sites Section */ }
213+ { pendingSiteEntries . length > 0 && (
214+ < div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-20" >
215+ < div className = "text-center mb-12" >
216+ < h2 className = "text-3xl font-bold text-gray-900 dark:text-white mb-4" >
217+ Coming Soon
218+ </ h2 >
219+ < p className = "text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto" >
220+ More languages are in development. Help us expand the Next.js
221+ documentation to reach developers worldwide.
222+ </ p >
223+ </ div >
224+
225+ < div className = "grid gap-6 md:grid-cols-2 lg:grid-cols-3" >
226+ { pendingSiteEntries . map ( ( [ locale , url ] ) => {
227+ const info = LANGUAGE_INFO [ locale as keyof typeof LANGUAGE_INFO ] ;
228+ if ( ! info ) return null ;
229+
230+ return (
231+ < div
232+ key = { locale }
233+ className = "group relative overflow-hidden rounded-2xl bg-white dark:bg-gray-800 shadow-md border border-gray-200 dark:border-gray-700 opacity-75"
234+ >
235+ { /* Gradient Background */ }
236+ < div
237+ className = { `absolute inset-0 bg-gradient-to-br ${ info . color } opacity-3` }
238+ />
239+
240+ { /* Card Content */ }
241+ < div className = "relative p-6" >
242+ < div className = "flex items-start justify-between mb-4" >
243+ < div className = "text-3xl mb-3 opacity-60" >
244+ { info . flag }
245+ </ div >
246+ < div className = "flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 bg-orange-100 dark:bg-orange-900/30 px-2 py-1 rounded-full" >
247+ < div className = "w-1.5 h-1.5 bg-orange-500 rounded-full animate-pulse" />
248+ < span > In Progress</ span >
249+ </ div >
250+ </ div >
251+
252+ < h3 className = "text-lg font-semibold text-gray-900 dark:text-white mb-2" >
253+ { info . nativeName }
254+ </ h3 >
255+
256+ < p className = "text-sm text-gray-500 dark:text-gray-400 mb-1" >
257+ { info . name }
258+ </ p >
259+
260+ < p className = "text-gray-600 dark:text-gray-300 mb-4 line-clamp-2 text-sm" >
261+ { info . description }
262+ </ p >
263+
264+ < div className = "flex items-center justify-between" >
265+ < div className = "flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400" >
266+ < Image
267+ src = "/globe.svg"
268+ alt = "Coming soon icon"
269+ width = { 12 }
270+ height = { 12 }
271+ className = "dark:invert opacity-60"
272+ />
273+ < span > Translation in Progress</ span >
274+ </ div >
275+
276+ < div className = "text-xs text-orange-600 dark:text-orange-400 font-medium" >
277+ Coming Soon
278+ </ div >
279+ </ div >
280+ </ div >
281+ </ div >
282+ ) ;
283+ } ) }
284+ </ div >
285+
286+ < div className = "text-center mt-8" >
287+ < p className = "text-sm text-gray-500 dark:text-gray-400 mb-4" >
288+ Want to help with translations?
289+ </ p >
290+ < a
291+ href = "https://github.com/vercel/next.js"
292+ target = "_blank"
293+ rel = "noopener noreferrer"
294+ className = "inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 text-sm font-medium"
295+ >
296+ < Image
297+ src = "/globe.svg"
298+ alt = "Contribute icon"
299+ width = { 16 }
300+ height = { 16 }
301+ className = "invert"
302+ />
303+ < span > Contribute on GitHub</ span >
304+ </ a >
305+ </ div >
306+ </ div >
307+ ) }
308+
162309 { /* Footer Section */ }
163310 < footer className = "border-t border-gray-200 dark:border-gray-700 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm" >
164311 < div className = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12" >
@@ -184,6 +331,8 @@ export default function Home() {
184331 < div className = "flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400" >
185332 < span > { totalTranslations } Languages</ span >
186333 < span > •</ span >
334+ < span > { pendingSiteEntries . length } In Progress</ span >
335+ < span > •</ span >
187336 < span > Open Source</ span >
188337 < span > •</ span >
189338 < span > Community Driven</ span >
0 commit comments