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
|
---
import Button from '@components/base/Button.astro';
import Card from '@components/base/Card.astro';
import Header from '@components/base/Header.astro';
import Paragraph from '@components/base/Paragraph.astro';
import Section from '@components/base/Section.astro';
import Slider from '@components/base/Slider.astro';
import Logo from '@components/logos/Logo.astro';
import Layout from '@layouts/Layout.astro';
import { Code } from 'astro:components';
---
<Layout>
<Section class="flex-col justify-center items-center h-screen md:min-h-[600px]">
<div class="flex flex-col justify-center items-center gap-y-4">
<Logo size={56} logo="oneconfig.minimal"/>
<Header align="center" size="xxl" class="max-w-[600px]">
Meet <b>OneConfig</b>, the library designed for <b>everyone</b>.
</Header>
<div class="flex flex-row justify-center items-center gap-2">
<Button href="/projects/oneconfig/download" iconLeft="download" text="Download"/>
<Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/>
</div>
</div>
</Section>
<Section tabindex="0">
<div slot="left">
<Header size="xl" class="text-navy-peony">Forge is complicated</Header>
<Paragraph size="md" class="text-gray-400 max-w-[500px]">Modding Minecraft has always been difficult, particularly with their configuration. Remembering all of the keybinds, commands; it just isn't intuitive.</Paragraph>
</div>
<div slot="right" class="w-3/4 max-w-80 md:max-w-none md:w-auto">
<img class="w-full md:w-[20rem]" src="/media/oneconfig/page_media_1.svg" alt="stuff"/>
</div>
</Section>
<Section tabindex="0" colReverse={false}>
<div slot="left" class="flex justify-center">
<img class="max-sm:w-full w-64" src="/media/oneconfig/page_media_2.svg" alt="stuff"/>
</div>
<div slot="right">
<Header size="xl" class="text-navy-peony">Clients are locked-down</Header>
<Paragraph size="md" class="text-gray-400 max-w-[500px]">While they improve usability, they're slow to adopt new mods absent from the community and force unwanted features onto users to profit off of them.</Paragraph>
</div>
</Section>
<Section tabindex="0">
<div slot="left">
<Header size="xl" class="text-navy-peony">Best of both worlds</Header>
<Paragraph size="md" class="text-gray-400 max-w-[500px]">OneConfig brings the simplicity of a client to the everyday user, gives advanced users and developers complete control over everything, while remaining free and open-source.</Paragraph>
</div>
<div slot="right" class="w-3/4 max-w-80 md:max-w-none md:w-auto flex justify-center">
<img class="w-full md:w-[20rem] lg:w-[30rem]" src="/media/oneconfig/page_media_3.svg" alt="stuff"/>
</div>
</Section>
<div class="section bg-blue-75 flex flex-col justify-center items-center min-h-screen">
<Section colReverse={false} maxWidth="1120px" wFull={false} class="pt-10 md:py-20 max-sm:h-screen">
<div slot="left">
<!-- TODO: FIX Codeblock overflowing on mobile -->
<div class="max-sm:hidden">
<Code
code={
`public class MyConfig {
@Switch(
name = "Sub Switch",
type = OptionType.SWITCH
)
public static boolean subSwitch = false;
public MyConfig() {
super(new Mod("My Mod", ModType.UTIL_QOL), "config.json");
addDependency("subSwitch", () -> {
// Do stuff here
});
}
}`
}
lang="java"/>
</div>
</div>
<div slot="right" class="flex flex-col gap-2 text-left items-start">
<Header size="xl" class="text-blue-500">Written for developers</Header>
<Paragraph class="text-blue-400 max-w-[500px]">
With our simple APIs and documentation, it's easier than ever to integrate your mods with OneConfig.
</Paragraph>
<div class="flex">
<Button href="https://docs.polyfrost.org" iconLeft="book-open" style="secondary" text="Documentation"/>
</div>
</div>
</Section>
<Section maxWidth="1120px" wFull={false} class="py-10 md:py-20 gap-4 max-sm:h-screen">
<div slot="left" class="flex flex-col gap-2 text-left items-start">
<Header size="xl" class="text-blue-500">Designed for users</Header>
<Paragraph class="text-blue-400 max-w-[500px]">
We take pride in having the cleanest and most intuitive UI of any mod, config library, or client out there.
</Paragraph>
<div class="flex">
<Button href="/projects/oneconfig/download" style="secondary" iconLeft="download" text="Download"/>
</div>
</div>
<div data-scroll data-scroll-speed="3" slot="right">
<img src="/media/oneconfig/page_media_4.png" class="max-h-[285px] rounded-2xl"/>
</div>
</Section>
</div>
<Section id="unified_hud_editor" class="flex-col justify-center items-center h-screen md:min-h-[600px]">
<img data-scroll data-scroll-sticky data-scroll-target="#unified_hud_editor" data-scroll-direction="horizontal" src="/media/oneconfig/page_media_5.png" class="max-h-[285px] md:max-h-96 lg:max-h-[581px] rounded-2xl"/>
<div data-scroll data-scroll-speed="2" class="flex flex-col justify-center items-center gap-y-4">
<Header size="xl" align="center" class="w-96">A unified HUD editor</Header>
<Paragraph class="w-96 text-center text-gray-400">
Thanks to OneConfig's HUD API, you can customize any OneConfig-powered HUD to your liking, without having to worry about the hassle of finding the right command or keybind.
</Paragraph>
</div>
</Section>
<Section wrapperClass="bg-blue-100 -mb-40" wFull maxWidth="none" class="py-10 md:py-20 gap-4 !px-0 flex flex-col items-center justify-center">
<div class="max-w-[1024px] w-full flex flex-col gap-2 text-left items-start px-5">
<Header size="xl" class="text-blue-500">With many fabulous mods</Header>
<Paragraph class="text-blue-400 max-w-[500px]">
Discover a wide range of mods integrated with OneConfig to enhance your experience.
</Paragraph>
<div class="flex items-start flex-col md:flex-row max-sm:gap-y-1 gap-x-1">
<!-- TODO: HREF -->
<Button iconLeft="link-external" href="/mods" style="secondary" text="Discover mods"/>
</div>
</div>
<div class="flex flex-col justify-center items-center bg-blue-100 pb-10 max-w-full overflow-x-hidden">
<div class="flex flex-col justify-between items-center overflow-x-hidden h-[290px] max-w-[1920px]">
<Slider wrapperClass="-mb-40 mb-2 bg-blue-100" childrenNum={8}>
<Card text="Chatting" icon="chatting"/>
<Card text="PolySprint" icon="polysprint"/>
<Card text="VanillaHUD" icon="vanillahud"/>
<Card text="OverflowAnimations" icon="overflowanimations"/>
<Card text="CrashPatch" icon="crashpatch"/>
<Card text="PolyTime" icon="polytime"/>
<Card text="PolyWeather" icon="polyweather"/>
<Card text="Keystrokes" icon="keystrokes"/>
</Slider>
<Slider dir="right" wrapperClass="bg-blue-100" childrenNum={8}>
<Card text="Chatting" icon="chatting"/>
<Card text="PolySprint" icon="polysprint"/>
<Card text="VanillaHUD" icon="vanillahud"/>
<Card text="OverflowAnimations" icon="overflowanimations"/>
<Card text="CrashPatch" icon="crashpatch"/>
<Card text="PolyTime" icon="polytime"/>
<Card text="PolyWeather" icon="polyweather"/>
<Card text="Keystrokes" icon="keystrokes"/>
</Slider>
</div>
</div>
</Section>
<Section class="flex-col justify-center items-center mb-20" hFull>
<div class="flex relative md:-left-12">
<img src="/media/oneconfig/page_media_4.png" class="rounded-2xl"/>
<div class="border border-gray-200 rounded-3xl md:rounded-4xl shadow-sm bg-gray-50 flex flex-col justify-center items-center md:items-start p-4 md:p-8 absolute -bottom-12 translate-x-1/2 right-1/2 md:translate-x-0 md:-right-12 gap-y-2 md:gap-y-8">
<Logo logo="oneconfig.logo_text" class="w-48 h-12 md:min-w-72 md:h-auto"></Logo>
<Button href="/projects/oneconfig/download" iconLeft="download" text="Download now" class="max-w-fit"/>
</div>
</div>
</Section>
</Layout>
|
