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
|
---
import Button from '@components/base/Button.astro';
import Header from '@components/base/Header.astro';
import Paragraph from '@components/base/Paragraph.astro';
import Section from '@components/base/Section.astro';
import configConst from '@config';
import Layout from '@layouts/Layout.astro';
import { Code } from 'astro:components';
const leftCodeBlock = `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
});
}
}`;
const rightCodeBlock = leftCodeBlock;
---
<Layout>
<Section maxWidth="1920px" wFull class="flex-row justify-center items-center h-screen md:min-h-[600px] relative">
<div class="codeblock_container -left-12">
<Code lang="java" theme="github-light" code={leftCodeBlock}></Code>
</div>
<div class="flex flex-col justify-center items-center gap-y-4">
<Header align="center" size="xxl" class="text-navy-peony max-w-[600px]">
Open Source, Forever
</Header>
<Paragraph class="max-w-[400px] lg:max-w-[600px] text-center text-navy-peony">
We believe it is the right of the user and developer to know what code they are trusting to run behind the scenes.
</Paragraph>
<Button iconLeft="github" style="secondary">GitHub</Button>
</div>
<div class="codeblock_container after:-scale-x-125 -right-12">
<Code lang="java" theme="github-light" code={rightCodeBlock}></Code>
</div>
</Section>
<Section tabindex="0" colReverse={false}>
<div slot="left" class="flex justify-center">
<img class="max-sm:w-full w-64" src="/media/oss/page_media_1.svg" alt="stuff"/>
</div>
<div slot="right">
<Header size="xl" class="text-navy-peony">
Rooted from the developers
</Header>
<Paragraph size="md" class="text-gray-400 max-w-[500px]">
We believe it's the only way forward, our developers learned and built on open source for years. Many even made their own contributions on our projects before joining our team.
</Paragraph>
</div>
</Section>
<Section tabindex="0">
<div slot="left">
<Header size="xl" class="text-navy-peony">
Makes development faster
</Header>
<Paragraph size="md" class="text-gray-400 max-w-[500px]">
Open source lets us join forces with other developers in our community. This means new features and bug fixes come much faster, and way better.
</Paragraph>
</div>
<div slot="right" class="flex justify-center">
<img class="max-sm:w-full w-64" src="/media/oss/page_media_2.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/oss/page_media_3.svg" alt="stuff"/>
</div>
<div slot="right">
<Header size="xl" class="text-navy-peony">
Makes our code safer
</Header>
<Paragraph size="md" class="text-gray-400 max-w-[500px]">
There's no definite way to prevent anything from becoming malicious. But, open sourcing our code brings extra eyes to catch, and fix exploits before they’re abused.
</Paragraph>
</div>
</Section>
<Section wrapperClass="flex justify-center items-center mb-40" class="flex-col justify-center items-center">
<div class="flex flex-col gap-y-1 relative justify-center items-center">
<Header size="xl" class="text-navy-peony text-header-page text-center">
Contribute to our GitHub!
</Header>
<div class="flex flex-row justify-center items-center gap-x-2">
<Button style="secondary" iconLeft="github" href={configConst.socials.github}>GitHub</Button>
</div>
</div>
</Section>
</Layout>
<style>
.codeblock_container {
position: absolute;
max-width: 20vw;
@apply max-md:hidden;
& :global(.astro-code) {
background-color: transparent !important;
border: none !important;
overflow: hidden !important;
position: relative;
border-radius: 0 !important;
opacity: 0.7;
& :global(.line::before) {
content: "";
display: none;
}
}
&::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), theme(colors.gray.50 / 75%) 90%, theme(colors.gray.50) 100%);
}
}
</style>
|
