feat: add i18n support and add Chinese (#372)

* feat: add i18n support and add Chinese

* fix: resolve conflicts

* Update en.json with cancle settings

* Update zh.json with settngs cancle

---------

Co-authored-by: johnny0120 <15564476+johnny0120@users.noreply.github.com>
Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
Co-authored-by: Willem Jiang <143703838+willem-bd@users.noreply.github.com>
This commit is contained in:
johnny0120
2025-07-12 15:18:28 +08:00
committed by GitHub
parent 136f7eaa4e
commit e1187d7d02
31 changed files with 917 additions and 266 deletions
@@ -3,93 +3,52 @@
import { Bike, Building, Film, Github, Ham, Home, Pizza } from "lucide-react";
import { Bot } from "lucide-react";
import { useTranslations } from "next-intl";
import { BentoCard } from "~/components/magicui/bento-grid";
import { SectionHeader } from "../components/section-header";
const caseStudies = [
{
id: "eiffel-tower-vs-tallest-building",
icon: Building,
title: "How tall is Eiffel Tower compared to tallest building?",
description:
"The research compares the heights and global significance of the Eiffel Tower and Burj Khalifa, and uses Python code to calculate the multiples.",
},
{
id: "github-top-trending-repo",
icon: Github,
title: "What are the top trending repositories on GitHub?",
description:
"The research utilized MCP services to identify the most popular GitHub repositories and documented them in detail using search engines.",
},
{
id: "nanjing-traditional-dishes",
icon: Ham,
title: "Write an article about Nanjing's traditional dishes",
description:
"The study vividly showcases Nanjing's famous dishes through rich content and imagery, uncovering their hidden histories and cultural significance.",
},
{
id: "rental-apartment-decoration",
icon: Home,
title: "How to decorate a small rental apartment?",
description:
"The study provides readers with practical and straightforward methods for decorating apartments, accompanied by inspiring images.",
},
{
id: "review-of-the-professional",
icon: Film,
title: "Introduce the movie 'Léon: The Professional'",
description:
"The research provides a comprehensive introduction to the movie 'Léon: The Professional', including its plot, characters, and themes.",
},
{
id: "china-food-delivery",
icon: Bike,
title: "How do you view the takeaway war in China? (in Chinese)",
description:
"The research analyzes the intensifying competition between JD and Meituan, highlighting their strategies, technological innovations, and challenges.",
},
{
id: "ultra-processed-foods",
icon: Pizza,
title: "Are ultra-processed foods linked to health?",
description:
"The research examines the health risks of rising ultra-processed food consumption, urging more research on long-term effects and individual differences.",
},
{
id: "ai-twin-insurance",
icon: Bot,
title: 'Write an article on "Would you insure your AI twin?"',
description:
"The research explores the concept of insuring AI twins, highlighting their benefits, risks, ethical considerations, and the evolving regulatory.",
},
const caseStudyIcons = [
{ id: "eiffel-tower-vs-tallest-building", icon: Building },
{ id: "github-top-trending-repo", icon: Github },
{ id: "nanjing-traditional-dishes", icon: Ham },
{ id: "rental-apartment-decoration", icon: Home },
{ id: "review-of-the-professional", icon: Film },
{ id: "china-food-delivery", icon: Bike },
{ id: "ultra-processed-foods", icon: Pizza },
{ id: "ai-twin-insurance", icon: Bot },
];
export function CaseStudySection() {
const t = useTranslations("landing.caseStudies");
const cases = t.raw("cases") as Array<{ title: string; description: string }>;
return (
<section className="relative container hidden flex-col items-center justify-center md:flex">
<SectionHeader
anchor="case-studies"
title="Case Studies"
description="See DeerFlow in action through replays."
title={t("title")}
description={t("description")}
/>
<div className="grid w-3/4 grid-cols-1 gap-2 sm:w-full sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
{caseStudies.map((caseStudy) => (
<div key={caseStudy.title} className="w-full p-2">
<BentoCard
{...{
Icon: caseStudy.icon,
name: caseStudy.title,
description: caseStudy.description,
href: `/chat?replay=${caseStudy.id}`,
cta: "Click to watch replay",
className: "w-full h-full",
}}
/>
</div>
))}
{cases.map((caseStudy, index) => {
const iconData = caseStudyIcons[index];
return (
<div key={caseStudy.title} className="w-full p-2">
<BentoCard
{...{
Icon: iconData?.icon ?? Building,
name: caseStudy.title,
description: caseStudy.description,
href: `/chat?replay=${iconData?.id}`,
cta: t("clickToWatch"),
className: "w-full h-full",
}}
/>
</div>
);
})}
</div>
</section>
);