diff --git a/src/components/home/HomeOverviewStats.tsx b/src/components/home/HomeOverviewStats.tsx
new file mode 100644
index 0000000..e8e3496
--- /dev/null
+++ b/src/components/home/HomeOverviewStats.tsx
@@ -0,0 +1,57 @@
+interface HomeOverviewStatsProps {
+ locale: string
+ stats: {
+ totalProjects: number
+ activeProjects: number
+ archivedProjects: number
+ totalTags: number
+ newProjects7d: number
+ }
+ translations: {
+ sectionTitle: string
+ totalProjects: string
+ activeProjects: string
+ archivedProjects: string
+ totalTags: string
+ newProjects7d: string
+ }
+}
+
+function formatNumber(value: number, locale: string): string {
+ const formatter = new Intl.NumberFormat(locale === 'en' ? 'en-US' : 'zh-CN')
+ return formatter.format(value)
+}
+
+export function HomeOverviewStats({ locale, stats, translations }: HomeOverviewStatsProps) {
+ const cards = [
+ { label: translations.totalProjects, value: stats.totalProjects },
+ { label: translations.activeProjects, value: stats.activeProjects },
+ { label: translations.archivedProjects, value: stats.archivedProjects },
+ { label: translations.totalTags, value: stats.totalTags },
+ { label: translations.newProjects7d, value: stats.newProjects7d },
+ ]
+
+ return (
+
+
+
{translations.sectionTitle}
+
+
+
+ {cards.map((card) => (
+
+
+ {card.label}
+
+
+ {formatNumber(card.value, locale)}
+
+
+ ))}
+
+ )
+}
diff --git a/src/components/home/HomeRankings.tsx b/src/components/home/HomeRankings.tsx
new file mode 100644
index 0000000..b50a54f
--- /dev/null
+++ b/src/components/home/HomeRankings.tsx
@@ -0,0 +1,188 @@
+'use client'
+
+import Link from 'next/link'
+import { useMemo, useState } from 'react'
+import type { HomeProjectSummary } from '@/hooks/useHome'
+
+type RankingWindow = '24h' | '7d' | '30d'
+
+interface HomeRankingsProps {
+ locale: string
+ latestByWindow: Record
+ topStars: HomeProjectSummary[]
+ translations: {
+ sectionTitle: string
+ latestTitle: string
+ starsTitle: string
+ window24h: string
+ window7d: string
+ window30d: string
+ noLatestProjects: string
+ noStarsProjects: string
+ viewAllLatest: string
+ viewAllStars: string
+ }
+}
+
+function formatDate(date: string, locale: string): string {
+ const dateObj = new Date(date)
+ const formatter = new Intl.DateTimeFormat(locale === 'en' ? 'en-US' : 'zh-CN', {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric',
+ })
+ return formatter.format(dateObj)
+}
+
+function formatNumber(value: number, locale: string): string {
+ const formatter = new Intl.NumberFormat(locale === 'en' ? 'en-US' : 'zh-CN')
+ return formatter.format(value)
+}
+
+function ProjectRow({
+ project,
+ locale,
+ rank,
+ showStars,
+}: {
+ project: HomeProjectSummary
+ locale: string
+ rank: number
+ showStars: boolean
+}) {
+ const name = locale === 'en' && project.nameEn ? project.nameEn : project.name
+
+ return (
+
+
+
+
{rank}
+
+
+ {name}
+
+
+ {formatDate(project.createdAt, locale)}
+
+
+
+ {showStars && (
+
+ ★ {formatNumber(project.githubStars, locale)}
+
+ )}
+
+
{translations.sectionTitle}
+
+
+
+
+
+
{translations.latestTitle}
+
+ {windowOptions.map((option) => (
+
+ ))}
+
+
+ {latestProjects.map((project, index) => (
+
+ ))}
+
+ ) : (
+ {translations.noLatestProjects}
+ )}
+
+
+
+ {translations.viewAllLatest} →
+
+
+
+
+
+
+
{translations.starsTitle}
+
+
+ {topStars.length > 0 ? (
+
+ {topStars.map((project, index) => (
+
+ ))}
+
+ ) : (
+ {translations.noStarsProjects}
+ )}
+
+
+
+ {translations.viewAllStars} →
+
+
+
+
+
{translations.sectionTitle}
+
+
+
+ {projects.length > 0 ? (
+
+ {projects.map((project) => {
+ const displayName = locale === 'en' && project.nameEn ? project.nameEn : project.name
+ const displayDescription =
+ locale === 'en' && project.descriptionEn ? project.descriptionEn : project.description
+
+ return (
+ -
+
+
+ {formatDate(project.createdAt, locale)}
+
+
+ {displayName}
+
+
+ {displayDescription}
+
+ {project.tags.length > 0 && (
+
+ {project.tags.slice(0, 3).map((tag) => (
+
+ {locale === 'en' && tag.nameEn ? tag.nameEn : tag.name}
+
+ ))}
+
+ )}
+
+ )
+ })}
+
+ ) : (
+ {translations.emptyText}
+ )}
+
+
+
+ {translations.viewAllProjects} →
+
+
+
+
+ )
+}
diff --git a/src/components/home/HomeTagInsights.tsx b/src/components/home/HomeTagInsights.tsx
new file mode 100644
index 0000000..1d035fb
--- /dev/null
+++ b/src/components/home/HomeTagInsights.tsx
@@ -0,0 +1,125 @@
+import Link from 'next/link'
+import type { HomeCategoryDistribution } from '@/hooks/useHome'
+
+interface HomeTagInsightsProps {
+ locale: string
+ topTags: Array<{
+ id: string
+ name: string
+ nameEn: string | null
+ slug: string
+ projectCount: number
+ }>
+ categories: HomeCategoryDistribution[]
+ translations: {
+ sectionTitle: string
+ topTagsTitle: string
+ categoryDistributionTitle: string
+ tagsUnit: string
+ projectsUnit: string
+ noTagData: string
+ viewAllProjects: string
+ }
+}
+
+function formatNumber(value: number, locale: string): string {
+ const formatter = new Intl.NumberFormat(locale === 'en' ? 'en-US' : 'zh-CN')
+ return formatter.format(value)
+}
+
+export function HomeTagInsights({
+ locale,
+ topTags,
+ categories,
+ translations,
+}: HomeTagInsightsProps) {
+ const maxAssociations = Math.max(1, ...categories.map((category) => category.projectAssociationCount))
+
+ return (
+
+
+
{translations.sectionTitle}
+
+
+
+
+ {translations.topTagsTitle}
+ {topTags.length > 0 ? (
+
+ {topTags.map((tag) => (
+
+ {locale === 'en' && tag.nameEn ? tag.nameEn : tag.name}
+
+ {formatNumber(tag.projectCount, locale)}
+
+
+ ))}
+
+ ) : (
+ {translations.noTagData}
+ )}
+
+
+
+ {translations.viewAllProjects} →
+
+
+
+
+
+ {translations.categoryDistributionTitle}
+ {categories.length > 0 ? (
+
+ {categories.map((category) => {
+ const categoryName =
+ locale === 'en' ? category.nameEn : category.name
+ const widthPercent = Math.max(
+ 6,
+ Math.round((category.projectAssociationCount / maxAssociations) * 100)
+ )
+
+ return (
+
+
+
{categoryName}
+
+ {formatNumber(category.tagCount, locale)} {translations.tagsUnit} ·{' '}
+ {formatNumber(category.projectAssociationCount, locale)} {translations.projectsUnit}
+
+
+
+ {category.topTag && (
+
+ {locale === 'en' && category.topTag.nameEn
+ ? category.topTag.nameEn
+ : category.topTag.name}
+
+ )}
+
+ )
+ })}
+
{translations.noTagData}
+ )}
+
+