aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/packages/docs/app/routes/home.tsx
blob: 66b53335621544fbab2e90d1020f2d3da29964d1 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
import type { Route } from './+types/home';
import { HomeLayout } from 'fumadocs-ui/layouts/home';
import { baseOptions } from '@/lib/layout.shared';
import { i18n } from '@/lib/i18n';

const texts = {
  en: {
    hero: {
      title: 'DropOut Minecraft Launcher',
      subtitle: 'Modern. Reproducible. Developer-Grade.',
      description: 'Built with Tauri v2 and Rust for native performance and minimal resource usage',
      start: 'Get Started',
      features: 'Features',
    },
    features: {
      items: [
        { title: 'High Performance', desc: 'Built with Rust and Tauri for minimal resource usage and fast startup times' },
        { title: 'Modern UI', desc: 'Clean, distraction-free interface with Svelte 5 and Tailwind CSS 4' },
        { title: 'Secure Auth', desc: 'Microsoft OAuth 2.0 with device code flow and offline mode support' },
        { title: 'Mod Loaders', desc: 'Built-in support for Fabric and Forge with automatic version management' },
        { title: 'Java Management', desc: 'Auto-detection and integrated downloader for Adoptium JDK/JRE' },
        { title: 'Instance System', desc: 'Isolated game environments with independent configs and mods' },
      ]
    },
    why: {
      title: 'Why DropOut?',
      items: [
        { q: 'Your instance worked yesterday but broke today?', a: '→ DropOut makes it traceable.' },
        { q: 'Sharing a modpack means zipping gigabytes?', a: '→ DropOut shares exact dependency manifests.' },
        { q: 'Java, loader, mods, configs drift out of sync?', a: '→ DropOut locks them together.' },
      ]
    },
    cta: {
      title: 'Ready to get started?',
      desc: 'Check out the documentation to learn more about DropOut',
      button: 'Read the Docs',
    }
  },
  zh: {
    hero: {
      title: 'DropOut Minecraft 启动器',
      subtitle: '现代、可复现、开发者级',
      description: '基于 Tauri v2 和 Rust 构建,拥有原生性能和极低的资源占用',
      start: '开始使用',
      features: '功能特性',
    },
    features: {
      items: [
        { title: '高性能', desc: '使用 Rust 和 Tauri 构建,资源占用最小,启动速度极快' },
        { title: '现代化界面', desc: '简洁、无干扰的界面,使用 Svelte 5 和 Tailwind CSS 4' },
        { title: '安全认证', desc: '支持微软 OAuth 2.0 设备代码流和离线模式' },
        { title: '模组支持', desc: '内置 Fabric 和 Forge 支持,自动管理版本' },
        { title: 'Java 管理', desc: '自动检测并集成 Adoptium JDK/JRE 下载器' },
        { title: '实例系统', desc: '独立的游戏环境,独立的配置和模组' },
      ]
    },
    why: {
      title: '为什么选择 DropOut?',
      items: [
        { q: '你的实例昨天还能用,今天就坏了?', a: '→ DropOut 让它可追溯。' },
        { q: '分享模组包意味着打包数GB的文件?', a: '→ DropOut 分享精确的依赖清单。' },
        { q: 'Java、加载器、模组、配置不同步?', a: '→ DropOut 将它们锁定在一起。' },
      ]
    },
    cta: {
      title: '准备好开始了?',
      desc: '查看文档以了解更多关于 DropOut 的信息',
      button: '阅读文档',
    }
  }
};

export function meta({ params }: Route.MetaArgs) {
  return [
    { title: 'DropOut - Modern Minecraft Launcher' },
    { name: 'description', content: 'A modern, reproducible, and developer-grade Minecraft launcher built with Tauri v2 and Rust.' },
  ];
}

export default function Home({ params }: Route.ComponentProps) {
  const lang = (params.lang as 'en' | 'zh') || i18n.defaultLanguage;
  const t = texts[lang];
  
  // 默认语言(zh)不显示前缀,其他语言显示前缀
  const isDefaultLocale = lang === i18n.defaultLanguage;
  const localePrefix = isDefaultLocale ? '' : `/${lang}`;

  return (
    <HomeLayout {...baseOptions(lang)}>
      <div className="container max-w-6xl mx-auto px-4 py-16">
        {/* Hero Section */}
        <div className="text-center mb-16">
          <h1 className="text-5xl font-bold mb-6 bg-gradient-to-r from-blue-600 to-cyan-500 bg-clip-text text-transparent">
            {t.hero.title}
          </h1>
          <p className="text-xl text-fd-muted-foreground mb-2">
            {t.hero.subtitle}
          </p>
          <p className="text-lg text-fd-muted-foreground max-w-2xl mx-auto mb-8">
            {t.hero.description}
          </p>
          <div className="flex gap-4 justify-center mb-12">
            <a
              className="bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg px-6 py-3 transition-colors cursor-pointer"
              href={`${localePrefix}/docs`}
            >
              {t.hero.start}
            </a>
            <a
              className="bg-fd-secondary hover:bg-fd-secondary/80 text-fd-secondary-foreground font-semibold rounded-lg px-6 py-3 transition-colors cursor-pointer"
              href={`${localePrefix}/docs/features`}
            >
               {t.hero.features}
            </a>
          </div>
        </div>

        {/* Launcher Showcase */}
        <div className="mb-16">
          <div className="rounded-xl overflow-hidden shadow-2xl border border-fd-border">
            <img 
              src="/image.png" 
              alt="DropOut Launcher Interface" 
              className="w-full h-auto"
            />
          </div>
        </div>

        {/* Features Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
          {t.features.items.map((item, i) => (
             <div key={i} className="p-6 rounded-lg border border-fd-border bg-fd-card">
              <h3 className="font-semibold text-lg mb-2">{item.title}</h3>
              <p className="text-sm text-fd-muted-foreground">
                {item.desc}
              </p>
            </div>
          ))}
        </div>

        {/* Why DropOut Section */}
        <div className="text-center mb-16">
          <h2 className="text-3xl font-bold mb-6">{t.why.title}</h2>
          <div className="max-w-3xl mx-auto space-y-4 text-left">
            {t.why.items.map((item, i) => (
              <div key={i} className="p-4 rounded-lg bg-fd-muted/50">
                <p className="text-fd-foreground">
                  <span className="font-semibold">{item.q}</span>
                  <br />
                  <span className="text-fd-muted-foreground">{item.a}</span>
                </p>
              </div>
            ))}
          </div>
        </div>

        {/* CTA Section */}
        <div className="text-center py-12 px-6 rounded-xl bg-gradient-to-r from-blue-600/10 to-cyan-500/10 border border-blue-600/20">
          <h2 className="text-3xl font-bold mb-4">{t.cta.title}</h2>
          <p className="text-lg text-fd-muted-foreground mb-6">
            {t.cta.desc}
          </p>
          <a
            className="inline-block bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg px-8 py-3 transition-colors"
            href={`${localePrefix}/docs/getting-started`}
          >
            {t.cta.button}
          </a>
        </div>
      </div>
    </HomeLayout>
  );
}