aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/packages/docs/app/routes/home.tsx
blob: b1f85168017cd0b708ceae973df083f103421469 (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
import type { Route } from './+types/home';
import { HomeLayout } from 'fumadocs-ui/layouts/home';
import { Link } from 'react-router';
import { baseOptions } from '@/lib/layout.shared';

export function meta({}: 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() {
  return (
    <HomeLayout {...baseOptions()}>
      <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">
            DropOut Minecraft Launcher
          </h1>
          <p className="text-xl text-fd-muted-foreground mb-2">
            Modern. Reproducible. Developer-Grade.
          </p>
          <p className="text-lg text-fd-muted-foreground max-w-2xl mx-auto mb-8">
            Built with Tauri v2 and Rust for native performance and minimal resource usage
          </p>
          <div className="flex gap-4 justify-center mb-12">
            <Link
              className="bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg px-6 py-3 transition-colors"
              to="/docs/en"
            >
              Get Started
            </Link>
            <Link
              className="bg-fd-secondary hover:bg-fd-secondary/80 text-fd-secondary-foreground font-semibold rounded-lg px-6 py-3 transition-colors"
              to="/docs/en/features"
            >
              Features
            </Link>
          </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">
          <div className="p-6 rounded-lg border border-fd-border bg-fd-card">
            <div className="text-2xl mb-3">🚀</div>
            <h3 className="font-semibold text-lg mb-2">High Performance</h3>
            <p className="text-sm text-fd-muted-foreground">
              Built with Rust and Tauri for minimal resource usage and fast startup times
            </p>
          </div>
          <div className="p-6 rounded-lg border border-fd-border bg-fd-card">
            <div className="text-2xl mb-3">🎨</div>
            <h3 className="font-semibold text-lg mb-2">Modern UI</h3>
            <p className="text-sm text-fd-muted-foreground">
              Clean, distraction-free interface with Svelte 5 and Tailwind CSS 4
            </p>
          </div>
          <div className="p-6 rounded-lg border border-fd-border bg-fd-card">
            <div className="text-2xl mb-3">🔐</div>
            <h3 className="font-semibold text-lg mb-2">Secure Auth</h3>
            <p className="text-sm text-fd-muted-foreground">
              Microsoft OAuth 2.0 with device code flow and offline mode support
            </p>
          </div>
          <div className="p-6 rounded-lg border border-fd-border bg-fd-card">
            <div className="text-2xl mb-3">🔧</div>
            <h3 className="font-semibold text-lg mb-2">Mod Loaders</h3>
            <p className="text-sm text-fd-muted-foreground">
              Built-in support for Fabric and Forge with automatic version management
            </p>
          </div>
          <div className="p-6 rounded-lg border border-fd-border bg-fd-card">
            <div className="text-2xl mb-3">☕</div>
            <h3 className="font-semibold text-lg mb-2">Java Management</h3>
            <p className="text-sm text-fd-muted-foreground">
              Auto-detection and integrated downloader for Adoptium JDK/JRE
            </p>
          </div>
          <div className="p-6 rounded-lg border border-fd-border bg-fd-card">
            <div className="text-2xl mb-3">📦</div>
            <h3 className="font-semibold text-lg mb-2">Instance System</h3>
            <p className="text-sm text-fd-muted-foreground">
              Isolated game environments with independent configs and mods
            </p>
          </div>
        </div>

        {/* Why DropOut Section */}
        <div className="text-center mb-16">
          <h2 className="text-3xl font-bold mb-6">Why DropOut?</h2>
          <div className="max-w-3xl mx-auto space-y-4 text-left">
            <div className="p-4 rounded-lg bg-fd-muted/50">
              <p className="text-fd-foreground">
                <span className="font-semibold">Your instance worked yesterday but broke today?</span>
                <br />
                <span className="text-fd-muted-foreground">→ DropOut makes it traceable.</span>
              </p>
            </div>
            <div className="p-4 rounded-lg bg-fd-muted/50">
              <p className="text-fd-foreground">
                <span className="font-semibold">Sharing a modpack means zipping gigabytes?</span>
                <br />
                <span className="text-fd-muted-foreground">→ DropOut shares exact dependency manifests.</span>
              </p>
            </div>
            <div className="p-4 rounded-lg bg-fd-muted/50">
              <p className="text-fd-foreground">
                <span className="font-semibold">Java, loader, mods, configs drift out of sync?</span>
                <br />
                <span className="text-fd-muted-foreground">→ DropOut locks them together.</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">Ready to get started?</h2>
          <p className="text-lg text-fd-muted-foreground mb-6">
            Check out the documentation to learn more about DropOut
          </p>
          <Link
            className="inline-block bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg px-8 py-3 transition-colors"
            to="/docs/en/getting-started"
          >
            Read the Docs
          </Link>
        </div>
      </div>
    </HomeLayout>
  );
}